html5 lazyload css,EasyLazyload.js 超好用js图片延迟加载

97108c97a314a4c961154d13b79b2398.png

94a6dc5feabd4193c6b752bf51a273a1.png

插件描述:超简单图片延迟加载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 是真延迟加载 而且不会对样式有任何影响。

队列式加载,不会影响页面效率。

不需要设置任何宽高,简单易用

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值