Vue3图片懒加载

背景

界面很长，屏幕不能一下装下所有内容，如果以进入首页就把所有内容都加载完的话所需时间较长，会影响用户体验，所以可以当用户浏览到时再去加载。

代码

新建index.js文件

src下新建directives文件夹，并新建index.js文件

import { useIntersectionObserver } from '@vueuse/core'
import { install } from 'element-plus'

export const lazyPlugin = {
    install(app){
        // 懒加载指令逻辑

        // 定义全局指令
        // 这个属于图片懒加载部分
        app.directive('img-lazy',{
            mounted(el, binding){
                // el: 指令绑定的那个元素 img
                // binding: binding.value 指令等于号后面绑定的表达式的值 图片url
                const {stop} =useIntersectionObserver(
                    el,
                    ([{isIntersecting}]) => {
                        // 第一次赋值之后，就不用再监听了 -> stop()
                        // 防止内存的浪费
                        if(isIntersecting){
                            el.src = binding.value
                            stop()
                        }
                    },
                )
            }
        })
    }
}

修改main.js文件

// 引入图片延迟加载
import {lazyPlugin} from '@/directives'

// 使用图片延迟加载插件
app.use(lazyPlugin)

使用

index.js文件中定义的名字叫img-lazy，在这里使用img的时候用 v-img-lazy，后面跟图片对应路径即可。

比如：

 <img :alt="item.content" v-img-lazy="baseUrl + item.imgUrl"/>