vue 实现图片懒加载

使用 IntersectionObserver 监视元素进入可视区域

export default {
    // vue2 inserted   vue3 mounted
    inserted(el) {
        const imgSrc = el.src
        el.src = ''
        // 观察者
        const obServer = new IntersectionObserver(([{ isIntersecting }]) => {
            // 元素出现在可视区域，和离开可视区域被触发
            if (isIntersecting) {
                // 加载图片
                el.src = imgSrc
                // 停止观察
                obServer.unobserve(el)
            }
        })
        obServer.observe(el)
    }
}

main.js注册

import lazy from "./directives/lazy"
Vue.directive('lazy', lazy)

页面使用

<img v-lazy  src="https://www.runoob.com/wp-content/uploads/2013/07/pic_html5.gif" />