jQuery图片懒加载插件

图片懒加载

图片懒加载也就是图片的延迟加载，可提高网页加载速度，也能帮助减轻服务器负担

支持主流的浏览器，注意：IE10以下不支持
点击“查看演示”，可以在线预览插件效果，点击“立即下载”，即可下载插件

使用步骤：

1. 下载插件，并解压
2. 找到里面的 EasyLazyload.js 文件，并引入需要图片懒加载的html页面中
3. 将图片 src 替换为 data-lazy-src，如：<img data-lazy-src="..." />
4. 调用全局方法，lazyLoadInit()

注意：
引入 EasyLazyload.js 前需要引用 jquery && zepto
需要在开启服务下运行

调用示例：

<script>
    lazyLoadInit({
        coverColor:"white",
        coverDiv:"<h1>test</h1>",
        offsetBottom:0,
        offsetTopm:0,
        showTime:1100,
        onLoadBackEnd:function(i,e){
            console.log("onLoadBackEnd:"+i);
        }
        ,onLoadBackStart:function(i,e){
            console.log("onLoadBackStart:"+i);
        }
    });
</script>

参数说明：

• coverColor：图片即将显示时覆盖层的颜色
• coverDiv：图片即将显示时覆盖层可显示的土自定义组件
• offsetBottom：图片距离屏幕底部出现时间点的距离差值（注解：延迟加载图片会在图片顶部接触屏幕底部时出现，如果想要让图片顶部距离屏幕底部有一定距离时出现，请设置此值）
• offsetTopm：图片距离屏幕底部出现时间点的距离差值（注解：同上，距离顶部）
• onLoadBackEnd：图片已经完全出现时的回调函数，参数为（index，event）加载的图片下标，以及dom对象（dom对象为jquerydom或zeptodom对象）
• onLoadBackStart：图片已经下载完成，即将开始显示时的回调函数（参数同上）

本插件的下载地址：

https://www.jq22.com/jquery-info11629