插件描述：超简单图片延迟加载js插件
更新时间：2018/7/23 上午12:1:43
更新说明：修改不能正常访问的图片路径。
EasyLazyload.js
超级好用的js 图片延迟加载插件
使用方法
引入 EasyLazyload.js
将图片 src 替换为 data-lazy-src
1 | <img data-lazy-src="..." /> |
调用全局方法
1 | lazyLoadInit(） |
使用须知
引入 EasyLazyload.js 前需要引用 jquery && zepto
需要在开启服务下运行
参数列表
示例代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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：图片已经下载完成，即将开始显示时的回调函数（参数同上）
EasyLazyload.js 优点
EasyLazyload.js 是真延迟加载 而且不会对样式有任何影响。
队列式加载，不会影响页面效率。
不需要设置任何宽高，简单易用
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： js计算器插件
- 下一个特效： 手机端实现多图片上传