vue3图片懒加载IntersectionObserver和useIntersectionObserver如何用
这篇文章主要讲解了“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中使用如下:
感谢各位的阅读,以上就是“vue3图片懒加载IntersectionObserver和useIntersectionObserver如何用”的内容了,经过本文的学习后,相信大家对vue3图片懒加载IntersectionObserver和useIntersectionObserver如何用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!
新闻标题:vue3图片懒加载IntersectionObserver和useIntersectionObserver如何用
网页链接:http://scyanting.com/article/ipgpjp.html