vue3使用自定义指令实现图片懒加载

// 自定义指令
app.directive('lazy', {
    mounted(el, binding) { // 绑定的元素，绑定的值
        // IntersectionObserver可以用来自动监听元素是否进入了设备的可视区域之内，而不需要频繁的计算来做这个判断
        const observe = new IntersectionObserver(([{isIntersecting}]) => {
            if (isIntersecting) { // 如果进入了可视区
                console.log("进入了")
                // 停止观察,加载出来之后就不需要继续观察了
                observe.unobserve(el)
                console.log(el,binding.value,) // binding.value就是绑定的地址
                // 将地址给src显示
                el.src = binding.value
            }
        })
        observe.observe(el)// 使用observe上的observe方法观察这个dom元素
    }
})

模板中使用

<img v-lazy="`src/assets/2yz3m9.jpg`" alt="">