对前端而言,提高网页的加载速度非常重要。众所周知,图片是最吃流量的。我们都知道的优化技巧是页面加载时只加载首屏页面用到的图片即可,其他的图片资源可以稍后再加载。有一款jquery的lazyload插件便是一个可以实现图片延迟加载的插件,在用户触发某个条件之后再加载对应的图片资源,这对网站的打开速度有很大提升。
1、插件的使用方法很简单(依赖jquery):引入lazyload.js(压缩版才4KB)
2、对我们想要延迟加载的图片添加lazy样式,用”data-original” 替换图片的引用路径
3、将页面里所有img属性src属性用data-xx代替,当页面滚动直至此图片出现在可视区域时,用js取到该图片的data-xx的值赋给src。
<!-- 对img标签使用 --><img class="lazy" data-original="img/example.jpg"> <!-- 延迟加载元素的背景图 --><div class="lazy" data-original="img/bg.jpg">
4、在JS文件中调用lazyload()方法,具体例子如下。
$(function(){ //可任意选择你想延迟加载的目标元素,例如直接使用样式名lazy作为选择条件 $("img .lazy").lazyload({ placeholder : "img/grey.gif", //占位图 effect: "fadeIn", // 加载效果 threshold: 200, // 提前加载 event: 'click', // trigger container: $("#container"), //指定容器 failurelimit : 5 // 发生混乱时的hack手段 }); });
参数的具体说明如下:
参数 | 作用 | 说明 |
---|---|---|
placeholder | 占位图片 | 图片路径值,图片加载时占位图自动隐藏 |
effect | 图片载入时动画效果 | 值有show(直接显示),fadeIn(淡入),slideDown(滑入)等jq常用效果 |
threshold | 提前开始加载高度 | 数字值,是离需要加载目标的高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,避免用户看到图片加载过程 |
event | 图片加载trigger | 值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…) |
container | 指定容器 | lazyload默认在滚动浏览器滚动条时生效,这个参数可以让你在滚动某DIV的滚动条时执行懒加载 |
failurelimit | 提高稳定性 | 若是某一张该被加载的图片未能正确加载,则加载其后的第N张图 |
本网站所有源码和软件均为作者提供和网友推荐收集整理而来!
本站提供的所有模块、软件等资源,均不提供任何技术服务,请悉知!
如您需要商用,请支持正版,本站提供的程序仅供学习和研究使用!
资源每天实时更新,如遇压缩包解压密码,一律为:www.dch888.cn
如有侵犯你版权的,请来信(邮箱:i@dch888.cn)指出,本站将立即改正。
都潮汇 » 超级蜘蛛池之图片懒加载使用方法_蜘蛛技巧_超级蜘蛛池
本站提供的所有模块、软件等资源,均不提供任何技术服务,请悉知!
如您需要商用,请支持正版,本站提供的程序仅供学习和研究使用!
资源每天实时更新,如遇压缩包解压密码,一律为:www.dch888.cn
如有侵犯你版权的,请来信(邮箱:i@dch888.cn)指出,本站将立即改正。
都潮汇 » 超级蜘蛛池之图片懒加载使用方法_蜘蛛技巧_超级蜘蛛池
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 都潮汇