vue中使用自定义指令写图片懒加载 @劉䔳

在main.js中（全局）

Vue.directive('load', {
//钩子函数
inserted(el,binding,vNode) {
    // el：指令所绑定的元素，可以用来直接操作 DOM 。
    function loadImg(el,binding){
        if(!el.src){
            el.src=binding.value;
        }
    }
    // console.log(binding)
    const io=new IntersectionObserver(ioes=>{
        ioes.forEach(ioe=>{
            // target 被观察的目标元素，是一个 DOM 节点对象
            const el=ioe.target;
            // intersectionRatio 目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0
            const intersectionRatio=ioe.intersectionRatio;
            if(intersectionRatio>0&&intersectionRatio<=1){
                loadImg(el,binding)
            }
            el.onload=el.onerror=()=>io.unobserve(el);
            // 当图片加载成功或是失败时就停止观察
        })
    })
    io.observe(el);
}
})

在html中

<img  v-load="图片路径" alt="">