插件描述:超简单图片延迟加载js插件
更新时间:2018/7/23 上午12:1:43
更新说明:修改不能正常访问的图片路径。
EasyLazyload.js
超级好用的js 图片延迟加载插件
使用方法
引入 EasyLazyload.js
将图片 src 替换为 data-lazy-src
调用全局方法lazyLoadInit()
使用须知引入 EasyLazyload.js 前需要引用 jquery && zepto
需要在开启服务下运行
参数列表
示例代码
lazyLoadInit({
coverColor:"white",
coverDiv:"
test
",offsetBottom:0,
offsetTopm:0,
showTime:1100,
onLoadBackEnd:function(i,e){
console.log("onLoadBackEnd:"+i);
}
,onLoadBackStart:function(i,e){
console.log("onLoadBackStart:"+i);
}
});
coverColor:图片即将显示时覆盖层的颜色
coverDiv:图片即将显示时覆盖层可显示的土自定义组件
offsetBottom:图片距离屏幕底部出现时间点的距离差值(注解:延迟加载图片会在图片顶部接触屏幕底部时出现,如果想要让图片顶部距离屏幕底部有一定距离时出现,请设置此值)
offsetTopm:图片距离屏幕底部出现时间点的距离差值(注解:同上,距离顶部)
onLoadBackEnd:图片已经完全出现时的回调函数,参数为(index,event)加载的图片下标,以及dom对象(dom对象为jquerydom或zeptodom对象)
onLoadBackStart:图片已经下载完成,即将开始显示时的回调函数(参数同上)
EasyLazyload.js 优点EasyLazyload.js 是真延迟加载 而且不会对样式有任何影响。
队列式加载,不会影响页面效率。
不需要设置任何宽高,简单易用