vue实现图片懒加载

1、lazy-img.js

export const lazyLoad = {
    mounted(el, binding) {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    // 默认加载网络图片链接
                    el.src = binding.value.src

                    observer.unobserve(el) // 停止观察

                }
            })
        }, {
            threshold: 0.01 // 当图片至少1%可见时触发
        })

        observer.observe(el)

        // 保存observer实例以便后续销毁
        el._observer = observer
    },
    unmounted(el) {
        if (el._observer) {
            el._observer.disconnect()
            delete el._observer
        }
    }
}

2、main.js引入

import {lazyLoad} from "@/directives/lazy-img.js";

const app = createApp(App)
app
    .directive("lazy", lazyLoad)
    .mount('#app')

3、组件中使用

// 这是预加载图片
import lazy from '@/assets/lazy.jpg'

<img :src="lazy" v-lazy="{src:'真实的图片地址'}">