前端懒加载插件Lazyloadjs 使用方法

引入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 为加载失败的图片元素
    }
});