本文介绍了一种使用Vue.js实现图片懒加载的方法。通过创建自定义指令并在图片元素上应用该指令，图片会在滚动到可视区域时动态加载。这种方法能够显著提高网页加载速度，改善用户体验。
先创建一个全局指令
export default {
mounted(el) {
const imgsrc = el.src //先记下图片路径
el.src = ''
const Observer = new IntersectionObserver(([{isIntersecting}]) => { //可以打印这个api,在加载的时候isIntersecting为true,离开的时候isIntersecting为false
if(isIntersecting){
el.src = imgsrc
Observer.unobserve(el) // 关闭观察
}
})
Observer.observe(el) //开启观察
}
}
再全局注册main.js
app.directive('lazy', lazy)
<img v-lazy src="./assets/1.jpg" alt=""/>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
