创建自定义指令
directives/index
<img v-imgLazy="url"/> // url=图片地址 v-imgLazy代替src
// =====================================
// 定制图片懒加载指令
import defaultImg from '@/assets/images/200.png' // 默认显示图片
import { useIntersectionObserver } from '@vueuse/core' // 引入监听是否进入视口
export default {
// 拿到main.js中由createApp方法产出的app实例对象
install (app) {
app.directive('imgLazy', {
mounted (el, binding) {
// el: img的dom对象
// binding.value: 图片url地址
// 使用vueuse/core提供的监听api 对图片dom进行监听 正式进入视口才加载
// img.src = url
const { stop } = useIntersectionObserver(
el, // 监听的目标元素
([{ isIntersecting }], observerElement) => {
if (isIntersecting) {
// 当图片url无效加载失败的时候使用默认图片替代
el.onerror = function () {
el.src = defaultImg
}
// 加载正式图片
el.src = binding.value // <img v-imgLazy = "url"/>
// stop(): 停止监听,防止重复调用请求
stop()
}
},
// 刚进入视口区域就立刻执行回调 0 - 1
{ threshold: 0 }
)
}
})
}
}