vue自定义懒加载

vue自定义懒加载

1. vue3+vueuse库自定义实现懒加载

2. 懒加载文件使用插件格式

3. 在src目录下新建directives目录,自此目录下建立index.js文件，如下图
   

4. index.js的代码如下所示

// 自定义懒加载插件
// 自定义懒加载需要 vueuse库里的函数 useIntersectionObserver-响应式监听目标元素的可见性。
import { useIntersectionObserver } from '@vueuse/core'

export const lazyPlugin = {
    install(app){
        // 懒加载指令逻辑
        // 自定义指令
        // 自定义懒加载指令
        app.directive('img-lazy',{
            mounted(el, binding){
                // el:绑定哪个元素 img
                // binding:binding.value 指令对于号后面绑定的表达式的值 图片url
                // console.log(el,binding.value);

                
                // useIntersectionObserver(
                //     el,
                //     // isIntersecting窗口在位置时显示boolean值
                //     ([{ isIntersecting }],) => {
                //     //   console.log(isIntersecting);
                //         if(isIntersecting){
                //             // 进入指定视图区域即图片所在视图区域 添加图片地址
                //             el.src = binding.value
                //         }
                //     },
                // )

                // 避免重复监听
                // useIntersectionObserver会一直监听区域位置
                const { stop } = useIntersectionObserver(
                    el,
                    // isIntersecting窗口在位置时显示boolean值
                    ([{ isIntersecting }],) => {
                    //   console.log(isIntersecting);
                        if(isIntersecting){
                            // 进入指定视图区域即图片所在视图区域 添加图片地址
                            el.src = binding.value
                            // 解决重复监听，让图片只加载一次,省内存
                            stop()
                        }
                    },
                )
            }
        })

    }
}

5. 在main,js里加载插件

// 引入懒加载指令插件并且注册（自定义的插件
import { lazyPlugin } from './directives'
// 注册懒加载插件
app.use(lazyPlugin)

6. 使用时用 v-img-lazy