这篇文章主要介绍“vue3图片懒加载IntersectionObserver和useIntersectionObserver怎么用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue3图片懒加载In
这篇文章主要介绍“vue3图片懒加载IntersectionObserver和useIntersectionObserver怎么用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue3图片懒加载IntersectionObserver和useIntersectionObserver怎么用”文章能帮助大家解决问题。
// 随便导入一张图片作为加载出错时的默认图片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()// }// })// }
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)
<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/04/dpu4tunefdh.jpg', 'Https://file.lsjlt.com/upload/202307/04/hmg53xtda2v.jpg', 'https://file.lsjlt.com/upload/202307/04/zfg1hvcevct.jpg', 'https://file.lsjlt.com/upload/202307/04/uq55fqjtna4.jpg', 'https://file.lsjlt.com/upload/202307/04/y0ufq3Dgt03.png', 'https://file.lsjlt.com/upload/202307/04/by5bjkmzf0m.jpg', 'https://file.lsjlt.com/upload/202307/04/3aynj1itlym.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怎么用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网精选频道,小编每天都会为大家更新不同的知识点。
--结束END--
本文标题: vue3图片懒加载IntersectionObserver和useIntersectionObserver怎么用
本文链接: https://www.lsjlt.com/news/351813.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0