VueUse是一个十分方便的Vue工具库，大大的提高了工作效率，官网地址：vueuse.org/

传统的图片懒加载通过滚动偏移计算，纯手写的话有一定的代码量，所以这里打算用vueuse写一个自定义指令。

下载vueuse

pnpm i @vueuse/core

创建懒加载自定义指令

// /directives/imgLazy.js
//文档地址：[useIntersectionObserver | VueUse](https://vueuse.org/core/useIntersectionObserver/)
import { useIntersectionObserver } from '@vueuse/core';

export default {
    bind(el, bidding) {
        const { stop } = useIntersectionObserver(
            el,
            ([{ isIntersecting }], observerElement) => {
                // 滚动到范围，isIntersecting为true
                if(isIntersecting){
                    let defaultSrc = el.getAttribute('data-img');
                    // 直接赋值src会被识别为静态文件，用require关键字可以解决，require关键字只接收字符串不支持变量，所以这里用了字符串模板拼接。
                    el.src = require(`@/assets/${defaultSrc}`);
                    el.removeAttribute("data-img"); 
                    // 这里建议调用stop回调，默认情况滚动到区域以外也会被触发。
                    stop();
                }
            },
        )
    }
}

批量注入自定义指令（全局）

// /directives/index.js
import debounce from "./debounce";
import imgLazy from "./imgLazy"; // 自定义指令

const directives = {
    debounce,
    imgLazy
};

export default {
    install(Vue) {
        Object.keys(directives).forEach((key) => {
            Vue.directive(key, directives[key])
        })
    },
}

// main.js
// 自定义指令 批量导入
import Directives from '../directives/index'
Vue.use(Directives)

应用场景

没有到范围区域统一默认显示加载图片(这里先用的vue的logo)，从network资源观察只有一个图片请求。

<template>
    <div>
        <div class="imgBox">
            <div class="p_margin-top-1500px">
                <img v-for="(item,index) in bannerArr" :key="index" 
                src="../../assets/logo.png" 
                :data-img="item" 
                alt="banner" 
                v-img-lazy>
            </div>
        </div>
    </div>
</template>

<script>
export default{
    data(){
        return{
            bannerArr: ['banner1.png', 'banner2.png', 'banner3.png']
        }
    }
}
</script>

图片元素增加自定义指令"v-img-lazy"