Lazyload.js 前端懒加载插件使用方法

Lazyload.js 是一款轻量级的 JavaScript 插件，可以延迟加载页面上的图片，从而提高网站的性能。在图片较多的网站中，使用懒加载可以有效减少初始加载时间，提升用户体验。

使用步骤

引入 Lazyload.js 文件

<script src='path/to/Lazyload.js'></script>

在需要懒加载的图片上添加 data-src 属性

<img data-src='path/to/image.jpg'>

初始化懒加载插件

var lazyload = new Lazyload({
    // 配置项
});

配置选项

var lazyload = new Lazyload({
    // 需要懒加载的图片的选择器，默认为 'img[data-src]' 
    selector: 'img[data-src]',

    // 加载图片的方式，默认为 'onload'，可选值有：'onscroll'、'onclick'
    // 'onload'：当页面加载完成后，所有的图片都会被加载
    // 'onscroll'：当滚动到图片所在位置时，图片才会被加载
    // 'onclick'：点击图片时，图片才会被加载
    loadMode: 'onscroll',

    // 加载图片的阈值，默认为 0，表示图片在可视区域内就加载
    // 值越大，图片加载的越晚，越小，图片加载的越早
    threshold: 0,

    // 加载前显示的图片，可以是图片路径或者base64编码
    placeholder: 'path/to/placeholder.jpg',

    // 加载失败显示的图片，可以是图片路径或者base64编码
    error: 'path/to/error.jpg',

    // 是否开启懒加载，默认为 true，开启懒加载
    lazyload: true,

    // 是否开启图片预加载，默认为 false，关闭预加载
    // 开启预加载可以提高图片加载的速度，但会增加服务器压力
    // 预加载的图片数量为 threshold 的两倍
    preload: false,

    // 预加载时显示的图片，可以是图片路径或者base64编码
    loading: 'path/to/loading.jpg',

    // 预加载时加载失败显示的图片，可以是图片路径或者base64编码
    preError: 'path/to/preError.jpg',

    // 加载成功后的回调函数
    success: function (img) {
        // img 为加载成功的图片元素
    },

    // 加载失败后的回调函数
    error: function (img) {
        // img 为加载失败的图片元素
    }
});

总结

Lazyload.js 是一个简单易用的懒加载插件，可以有效提升网站性能。通过简单的配置，就可以轻松实现图片懒加载，从而减少网站初始加载时间，提升用户体验。