文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue3图片懒加载IntersectionObserver和useIntersectionObserver如何用

2023-07-06 12:34

关注

这篇文章主要讲解了“vue3图片懒加载IntersectionObserver和useIntersectionObserver如何用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue3图片懒加载IntersectionObserver和useIntersectionObserver如何用”吧!

1、在src下创建helloworld.js 内容如下

// 随便导入一张图片作为加载出错时的默认图片import defaultImg from '@/assets/logo.svg'import {useIntersectionObserver} from "@vueuse/core"; //图片加载失败时候用的图片export default {    install (app) {        defineDirective(app)//自定义指令    }}// 自定义指令const defineDirective = (app) => {    // 1.图片懒加载指令v-lazyLoad// 原理:先存储图片地址不能在src上,当图片进入可视区,将你存储图片地址设置给图片元素(dom)的src即可。    app.directive('lazyLoad', {        // vue2.0监听使用指令的DOM是否创建好,钩子函数: inserted        // vue3.0 的指令拥有的钩子函数和组件的一样,使用指令的DON是否创建好,钩子函数: mounted,onMounted是在组合API时候使用,现在是选项        mounted (el, binding) { // 绑定的元素,绑定的值            // // 2.创建一个观察对象,来观察当前使用指令得元素            const observe = new IntersectionObserver(([{isIntersecting}]) => {                if (isIntersecting) { // 如果进入了可视区                    // 谁进入了可视区?得用observe去观察 是哪个元素使用了该指令,所以会传入dom对象el                    // 停止观察,因为观察一次就够了                    observe.unobserve(el)                    // console.log(binding.value, el) // binding.value就是绑定的地址                    // 3.监听图片加载失败,用默认图                    el.onerror = () => {                        el.src = defaultImg                    }                    // 4.将指令v-lazyLoad上的地址设置给el的src属性                    el.src = binding.value                }            }, {                threshold: 0//进入到可视区交界就开始观察            })            observe.observe(el)// 使用observe上的observe方法观察这个dom元素        }            // const { stop } = useIntersectionObserver(            //     // 监听目标元素            //     el,            //     ([{ isIntersecting }], observerElement) => {            //         if (isIntersecting) {            //             // 当图片url无效加载失败的时候使用默认图片替代            //             el.onerror = function () {            //                 el.src = defaultImg            //             }            //             console.log('加载')            //             el.src = binding.value            //             stop()            //         }            //     })            // }    })}

上边的代码中mounted下边这个是一种方式,这种方式不借助插件即不用安装任何东西

const observe = new IntersectionObserver(([{isIntersecting}]) => {        if (isIntersecting) { // 如果进入了可视区            // 谁进入了可视区?得用observe去观察 是哪个元素使用了该指令,所以会传入dom对象el            // 停止观察,因为观察一次就够了            observe.unobserve(el)            // console.log(binding.value, el) // binding.value就是绑定的地址            // 3.监听图片加载失败,用默认图            el.onerror = () => {                el.src = defaultImg            }            // 4.将指令v-lazyLoad上的地址设置给el的src属性            el.src = binding.value        }    }, {        threshold: 0//进入到可视区交界就开始观察    })    observe.observe(el)// 使用observe上的observe方法观察这个dom元素}

mounted 下边带注释的是另一种方式,这种方式需要安装插件安装过程点击进入教程

// const { stop } = useIntersectionObserver(//     // 监听目标元素//     el,//     ([{ isIntersecting }], observerElement) => {//         if (isIntersecting) {//             // 当图片url无效加载失败的时候使用默认图片替代//             el.onerror = function () {//                 el.src = defaultImg//             }//             console.log('加载')//             el.src = binding.value//             stop()//         }//     })// }

2、在main.js中导入并使用

import { createApp } from 'vue'import App from './App.vue'import './assets/reset.css'import Vant from 'vant'import 'vant/lib/index.css';// 导入自己UI组件库import UI from './helloworld'// 插件的使用,在main.js使用app.use(插件)createApp(App).use(Vant).use(UI).mount('#app')// 具体就是导入这个// import UI from './helloworld'// 再use(UI)

3、再app.vue中使用如下:

<template>  <div class="cs"></div>  <ul >    <li v-for="item in image_list" :key="item"><!--      原本的写法-->      <!-- <img :src="item.picture"  alt=""> --><!--      // 使用图片懒加载指令-->      <img v-lazyLoad="item"  alt="">    </li>  </ul></template><script setup>import {nextTick, onMounted, ref} from "vue";const image_list = ref([    'https://file.lsjlt.com/upload/202307/06/l0tnzinhayj.jpg',    'https://file.lsjlt.com/upload/202307/06/4cbtivfh1zw.jpg',    'https://file.lsjlt.com/upload/202307/06/2eas0txidpe.jpg',    'https://file.lsjlt.com/upload/202307/06/3do2vzdr0gt.jpg',    'https://file.lsjlt.com/upload/202307/06/geycv1fslfv.jpg',    'https://file.lsjlt.com/upload/202307/06/zz2vkah10bk.jpg',    'https://file.lsjlt.com/upload/202307/06/d4or1qzmkna.jpg'])</script><style lang="less" scoped>.cs{  height: 1000px;  background-color: pink;}.outer{  img{    display: inline-block;    width: 500px;  }}.inner{  display: inline-block;  width: 500px;  height: 50px;  background-color: deeppink;}</style>

感谢各位的阅读,以上就是“vue3图片懒加载IntersectionObserver和useIntersectionObserver如何用”的内容了,经过本文的学习后,相信大家对vue3图片懒加载IntersectionObserver和useIntersectionObserver如何用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯