lazyload for JQuery 滚屏图片加载…
来源:互联网 发布:ftp软件安卓 编辑:程序博客网 时间:2024/05/16 00:24
延迟滚屏加载主要优势在于他可以让首屏加载速度提高,而在首屏范围外的图片只有在滚屏的时候在加载(默认模式),对于低带宽的用户和高流量的网页来说这个技术有很可观的价值(提高首屏速度,节约CDN流量)。土豆网
首先你需要在你的网页里面应用jQuery和lazyload2个js文件:
JavaScript代码
- <script src="js/jquery.js"></script>
- <scriptsrc="js/lazyLoad.js"></script>
最简单的实现方式:
JavaScript代码
- <script>
- $(function(){
-
$("img").lazyload(); - })
- </script>
这个代表你网站上所有图片都会有这个效果,提供一个demo效果:http://www.dabaii.com/demo/20100907/index.html图片背景是红色的,你可以打开网页在首屏等图片加载完毕,网页加载完毕(看浏览器右下角出现完成2个字),在拉动滚动条,你会发现首屏以外的图片开始看到的是红色背景,然后才是图片(如果看不到,那恭喜你你的网速很快,我使用的图片比较小所以 网速快有可能体验不到效果,你可以 用firefox的插件Throttle看控制一下你的带宽看效果)。如果第一次没看到效果ctrl+F5刷可以再次看到。
但是很明显,这个并不是我实际想要的,很明显我不希望所有首屏以外的图片都实行延迟滚品加载机制,我的页面装饰图,体现页面风格的图片不需要使用这个效果。只有特定的产品图或者说是内容图(和页面效果无关的,是属于内容模块的图片)才使用这种机制。这样不会导致我下拉的时候页面效果很难看。所以使用的时候记得限定范围。另外lazyload 还提供了其他几个参数:JavaScript代码
- $("img").lazyload({
-
placeholder : "img/grey.gif",//设置图片未加载时候的替换图,是背景属性,所以会重复平铺的 -
container:$("#container"),//绑定到一个对象中,在这个对象中实行滚动触发这个效果。这个不好解释但是容易懂看官方的demo把 - effect : "fadeIn",//图片显示出来的时候淡出效果
- event :"click",//改变默认触发图片加载的方式,默认是滚屏加载,可以通过此参数改变成为点击或者其他事件
- failurelimit : 10//这个我没看明白英文能力差没办法 跪求解释官方上说这个是为了解决由于布局问题,在使用这个机制的时候视觉上的错误,可以通过这个属性设置默认的一个数值来干嘛干嘛的
- threshold : 200
//和楼上的一样 唉杯具应该是限定超过200x200范围外的图片才执行这个机制但是好像我测试了又不是那么回事 - });
lazyload forjQuery
访问 lazyload for jQuery网站(英文)
*内容以上面地址的介绍为准,此文章只不过提供个人的测试结果和解释。只作为参考,不能作为文档。请一定以辨证的眼光看待,免得误人子弟。请勿在未校队改文章内容前提下盲目的转载。如果发现错误或者有更好的建议请发邮件给我。邮箱 dabai@dabaii.com我会及时更正。谢谢。
体验新版博客
- lazyload for JQuery 滚屏图片加载…
- lazyload for JQuery 滚屏图片加载技术
- software engineering for SaaS - …
- Solution for "Waiting for …
- GVF - a new snake algorithm for …
- error: invalid storage class for…
- Oracle Enterprise Pack for Eclip…
- Solution of Enable extension for…
- Setting custom background for UI…
- 警告: No configuration found for…
- Web Dynpro for ABAP Config…
- Adobe PhotoShop CS6 for Ma…
- Password Recovery Procedure for …
- MMNL absent for 4294967292 secs;…
- java Struts2 jquery uploadify 多…
- ORA-02778 : Name given for the l…
- KAI-FU LEE : China Is Poised for…
- A good online git doc for beginn…
- PHP扩展开发(6):接收参数
- PHP扩展开发(7):zval结构
- mongoDB 与mysql 比速度
- 字符集和字符编码
- 【翻译】Iframe, onload 与 docume…
- lazyload for JQuery 滚屏图片加载…
- MySQL性能优化的最佳20+条经验
- PHP发送邮件乱码问题
- PHP验证码:随机扭曲、旋转、变形…
- PHP验证码:真正的随机正弦扭曲验…
- comet
- 微秒
- 关于php的libevent扩展的应用
- flex时间创建和比较总结