FunLazy

<script src="https://unpkg.com/funlazy@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/funlazy@latest"></script>

npm i funlazy -S
const FunLazy = require( "funlazy" );

<img data-funlazy="1.jpg" width="500" height="309">
<img data-funlazy="2.jpg" width="500" height="309">
<img data-funlazy="3.jpg" width="500" height="309">

<script>
    FunLazy();
</script>

<template>
    <div>
        <img 
            v-for="img of images" 
            :key="img" 
            :data-funlazy="img" 
            width="500" 
            height="309"
        >
    </div>
</template>

<script>
    const FunLazy = require( "funlazy" );
    export default {
        data () {
            return {
                images: [
                    require( "@/assets/img/1.jpg" ),
                    require( "@/assets/img/2.jpg" ),
                    require( "@/assets/img/3.jpg" )
                ]
            }
        },
        mounted () {
            FunLazy();
        }
    }
</script>

<template>
    <div>
        <img 
            v-for="img of imageData.images" 
            :key="img" 
            :data-funlazy="img" 
            width="500" 
            height="309"
        >
    </div>
</template>

<script setup>
    import { reactive, onMounted } from "vue";
    const FunLazy = require( "funlazy" );
    const imageData = reactive({
        images: [
            require( "@/assets/img/1.jpg" ),
            require( "@/assets/img/2.jpg" ),
            require( "@/assets/img/3.jpg" ),
            require( "@/assets/img/4.jpg" )
        ]
    });

    onMounted(() => {
        FunLazy();
    })
</script>

FunLazy({
    placeholder: "thumb.jpg",
    effect: "fadeIn"
});

const opt = FunLazy({
    placeholder: "thumb.jpg",
    effect: "fadeIn"
});

// 根据传入的自定义配置项
// 与默认的配置项进行合并
// 返回合并之后的配置结果
console.log( opt );

<button>添加图片</button>
<div>
    <img data-funlazy="1.jpg" width="500" height="309">
    <img data-funlazy="2.jpg" width="500" height="309">
    <img data-funlazy="3.jpg" width="500" height="309">
</div>

<script>
    const opt = FunLazy({
        autoCheckChange: true
    });

    // 设置 autoCheckChange: true
    // 新增加的图片会自动进行懒加载的解析
    // -------------------------------
    // -------------------------------
    // 不过此属性不支持 IE9 - 10
    // 在 IE9 - 10 中需要再次手动调用 FunLazy 函数来实现此功能，例如：
    const target = document.querySelector( "div" );
    document.querySelector( "button" ).addEventListener("click", function () {
        target.insertAdjacentHTML( "beforeend", '<img data-funlazy="new.jpg" width="500" height="309">' );

        // 支持 IE9 - 10
        if ( navigator.userAgent.toLowerCase().match( /msie (9|10)\.0/ ) ) {
            FunLazy( opt );
        }
    })
</script>

<img data-funlazy="1.jpg" width="500" height="309">
<img data-funlazy="2.jpg" width="500" height="309">
<img data-funlazy="3.jpg" width="500" height="309">

<script>

    // beforeLazy 属性可用于在图片进行懒加载操作之前
    // 对图片地址进行最后的处理，相当于架设了一层拦截
    // 可以很简单的在加载前对图片地址进行一次批量处理
    FunLazy({
        beforeLazy: function ( src ) {
            return src + "?id=" + Math.random().toString( 36 ).substr( 2, 10 );
        }
    });
</script>

<img data-funlazy="1.jpg" width="500" height="309">
<img data-funlazy="2.jpg" width="500" height="309">
<img data-funlazy="3.jpg" width="500" height="309">

<script>

    // useErrorImagePlaceholder 属性可用于在图片加载失败时
    // 用一张默认的图片进行占位显示
    // - 设置为 true 则使用内置的灰色图进行占位
    // - 传入图片地址则可以自定义占位图
    FunLazy({
        useErrorImagePlaceholder: true
        
        // 或者：
        // useErrorImagePlaceholder: "img/error.jpg"
    });
</script>