图片懒加载
- src/direcitves/index.js
- 在main.js中引入该文件
import directivePlugin from '@/direcitves'
- 在main.js中去全局注册插件
createApp(App)..use(directivePlugin).mount('#app')
- 使用:已经全局注册,直接在img标签上加
v-img-lazy="图片路径" ,并把img标签本身的src属性删除
- 在导入的defaultImg 后导入默认图片的路径
import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png' //默认加载图片
const plugin = {
install (app) {
console.log('指令插件', app)
// app.directive() todo
// 编写图片懒加载指令逻辑
app.directive('img-lazy', {
mounted (el, binding) {
// el:指令绑定的dom元素
// binding: value 指令绑定的表达式的值
console.log(el, binding.value)
// 懒加载的逻辑：监听当前的img dom对象是否进入到视口区域 如果进入 就把图片的地址交给img 的src属性
// 一旦src有了值就会自动发送http请求 获取图片资源
const { stop } = useIntersectionObserver(
el,
([{ isIntersecting }], observerElement) => {
// isIntersecting: 当前监听的元素是否成功进入到视口区域如果进来了就是true 否则就是false
// 有了一个判断是否进入视口区域的条件 如果为true就发送请求
if (isIntersecting) {
// 错误处理
el.onerror = function () {
// 使用默认图片交给src
el.src = defaultImg
}
el.src = binding.value
stop()
}
// 监听处理不是只进行一次的 每次进入移出视口都会再次执行回调
},
// 0 - 1 数值越大代表 要求进入的面积越大才能触发回调函数
{ threshold: 0 }
)
}
})
}
}
export default plugin
