Vue3---页面图片懒加载指令实现

 自定义指令 | Vue.js

 useIntersectionObserver | VueUse

1. mian.js

// main.js
const app = createApp(App)
//定义全局指令
app.directive('img-lazy',{
    mounted(el,bingding){
        // el:指令绑定的哪个元素
        // bingding:bingding.value 指令等于号后面绑定的表达式的值 图片url
        console.log(el,bingding.value)

        // 使用vueuse中useIntersectionObserver监测图片是否进入视口
        useIntersectionObserver(
            el,
            ([{ isIntersecting }]) => {
                // console.log(isIntersecting)
                if(isIntersecting){
                    //进入视口区域
                    el.src = bingding.value
                }
            },
        )
    }
})

组件使用：

<img v-img-lazy="item.picture" alt="">

1. 但是，入口文件通常只做一些初始化的事情，不应该包含太多得到逻辑，可以通过插件的方法把懒加载指令封装为插件，main.js入口文件只需要负责注册插件即可

2. useIntersectionObserver对于元素的监听是一直存在的，除非手动停止监听----存在内存浪费，可以在监听的图片第一次完成加载后就停止监听---stop()

优化后的代码为：

封装插件：

// /directives/index.js
import { useIntersectionObserver } from '@vueuse/core'
// 定义懒加载插件
export const lazyPlugin = {
    install(app){
        // 懒加载指令逻辑
        //定义全局指令
        app.directive('img-lazy',{
            mounted(el,bingding){
                // el:指令绑定的哪个元素
                // bingding:bingding.value 指令等于号后面绑定的表达式的值 图片url
                console.log(el,bingding.value)
                // 解构赋值
                const {stop} = useIntersectionObserver(
                    el,
                    ([{ isIntersecting }]) => {
                        console.log(isIntersecting)
                        if(isIntersecting){
                            //进入视口区域
                            el.src = bingding.value
                            // 在监听的图片第一次完成加载后就停止监听
                            stop()
                        }
                    },
                )
            }
        })
    }
}

 引用并注册：

// main.js
// 引用且注册懒加载指令插件
import {lazyPlugin} from "@/directives";
app.use(lazyPlugin)

 组件使用：

<!-- v-img-lazy 自定义指令-->
 <img v-img-lazy="item.picture" alt="">