第一步: 定义懒加载全局指令插件
具体操作:新建一个defineDirective.js文件,封装好以下代码
import { useIntersectionObserver } from '@vueuse/core'
const plugin = {
install (app) {
console.log('确认插件已经注册好了', app)
// 定义指令
app.directive('img-lazy', {
mounted (el, binding) {
console.log(el, binding.value)
// 核心思想:监控图片是否进入到视口区域 如果进来才发送图片请求
// 技术点:1. 如何知道图片进入到视口了? 2. 如何发送请求?
const { stop } = useIntersectionObserver(
el,
([{ isIntersecting }], observerElement) => {
// isIntersecting: 布尔值 true代表监听的元素已经进入了视口
// false代表监听的元素离开了视口
// 这个函数的监听很精确 不光可以横向 还可纵向
if (isIntersecting === true) {
// ? 当前图片进入视口了 赋值src正式发送图片请求
el.src = binding.value
// 优化 图片第一次请求回来后就停止监听
stop()
}
},
// threshold: 0 - 1 值越小 代表进入的视口的面积越小就会触发
// 反之越大触发 0 img刚刚露头就触发 1 完全暴露在视口中才会触发
{ threshold: 0 }
)
}
})
}
}
export default plugin
第二步:在main.js中注册插件
先引入,后注册
注册代码:createApp(App).use(defineDirective)