lazyload for JQuery 滚屏图片加载技术

ubmitted by chen0908  lazyload for JQuery 插件的主要功能是提供给整个页面或者固定对象的延迟滚屏加载。和预加载是两个相对的图片加载技术。
延迟滚屏加载主要优势在于他可以让首屏加载速度提高，而在首屏范围外的图片只有在滚屏的时候在加载（默认模式），对于低带宽的用户和高流量的网页来说这个技术有很可观的价值（提高首屏速度，节约CDN流量）。 土豆网  和 QQ返利 上面可以预览到这种效果。当你在下拉滚动条的时候，首屏以外的图片才加载（土豆网主要是视频缩略图，QQ返利主要是返利商家logo）。
首先你需要在你的网页里面应用jQuery和lazyload 2个js文件：
JavaScript代码

• 
  
• <script src="js/jquery.js" ></script>  
  
• <script src="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 for jQuery  下载   源码版   压缩版
访问 lazyload for jQuery网站（英文）
*内容以上面地址的介绍为准，此文章只不过提供个人的测试结果和解释。只作为参考，不能作为文档。请一定以辨证的眼光看待，免得误人子弟。请勿在未校队改文章内容前提下盲目的转载。如果发现错误或者有更好的建议 请发邮件给我。邮箱 dabai@dabaii.com 我会及时更正。谢谢。