<script src="funlazy.min.js"></script>

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

npm i funlazy -Sconst 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>    import { reactive, onMounted } from "vue";    const FunLazy = require( "funlazy" );    export default {        setup () {            const imageData = reactive({                images: [                    require( "./assets/img/10.jpg" ),                    require( "./assets/img/11.jpg" ),                    require( "./assets/img/12.jpg" ),                    require( "./assets/img/13.jpg" )                ]            });            onMounted(() => {                FunLazy();            })            return {                imageData            }        }    }</script>

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

var 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>    var opt = FunLazy({        autoCheckChange: true    });    // 设置 autoCheckChange: true    // 新增加的图片会自动进行懒加载的解析    // -------------------------------    // -------------------------------    // 不过此属性不支持 IE9 - 10    // 在 IE9 - 10 中需要再次手动调用 FunLazy 函数来实现此功能，例如：    var 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>