视图层
<img src="https://预览图片.xxx/xxx/xxx.jpg" :data-src="https://真实图片.xxx/xxx/xxx.jpg" v-lazyload/>
main.js
app.directive('lazyload',{
mounted(el, binding, vnode, prevVnode) {
const intersectionObserver = new IntersectionObserver((entries) => {
entries.forEach(dom => {
dom.isIntersecting && (el.src = el.getAttribute('data-src'))
})
});
// 开始监听
setTimeout(()=>{
intersectionObserver.observe(el);
},1000)
},
})
app.mount('#app');