FunLazy

原生 JavaScript 开发的轻量级图片懒加载组件

代码仓库

安装

unpkg cdn

<script src="https://unpkg.com/funlazy"></script>

jsdelivr cdn

<script src="https://cdn.jsdelivr.net/npm/funlazy"></script>

npm 安装

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>

注：如果在 Vue 项目中使用，需要在 mounted（vue2）或 onMounted（vue3） 中调用 FunLazy 函数。

自定义配置项

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

返回配置项（v2.1.0 新增）

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

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

自动检测懒加载元素的变化（v2.1.0 新增）

<button>添加图片</button>
<div id="img-box">
    <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
    // 新增加的图片会自动进行懒加载的解析
    const target = document.getElementById( "img-box" );
    document.querySelector( "button" ).addEventListener( "click", () => {
        target.insertAdjacentHTML( "beforeend", '<img data-funlazy="new.jpg" width="500" height="309">' );
    } )
</script>

加载图片前对图片地址进行处理（v2.1.0 新增）

<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: src => `${ src }?img-id=${ Math.random().toString( 36 ).slice( 2, 10 ) }`
    } );
</script>

当图片加载失败时使用指定的图片占位（v2.1.1 新增）

<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>

配置参数

开源协议

MIT License

浏览器支持

• Chrome 80+
• Edge 90+
• Safari 13+
• Firefox 90+
• IE 不支持