转载：你还在用jquery.lazyload这个坑爹的图片分屏加载插件么？

百度搜索“图片分屏加载”，映入眼帘的就是jquery.lazyload，相信不少人用过，或许如今还在用，今天我就来讲说这个插件的严重BUG。

　　何为图片分屏加载？顾名思义，就是让图片出如今浏览器可视区域内时，才进行加载。好处就是当页面上图片过多时候，不须要一次性加载完，大大提升了友好性，也减轻的服务器的压力。

　　关于jquery.lazyload的demo，你们能够看一下：demo

　　咱们发现，第一屏内的图片，是正常加载了，当滚动到第二张的时候，过了几秒，也渐显出来了，彷佛没什么大问题。这时，咱们用火狐的firebug再来观看下，固然为了确保测试稳定，我用金山卫士清空了浏览器缓存。

　　

　　看到了么？说好的分屏加载的效果呢？怎么仍是有2个请求。第一屏就一张图片，但实际上已经把两张图片都加载好了。坑爹的还不只如此，咱们继续看，当我把滚动条滑动到第二张图片……

　　纳尼？第三个请求出现了！！！我一共两张图片，用了jquery.lazyload竟然要下载3张，不只没有减轻服务器压力，反而增长了，这不明摆着坑爹嘛。

　　以后，我看了下lazyload的源码，其实逻辑上都是OK了，把img的src里的值，存放到自定义的original属性里，当图片滚动到浏览器可视区域内时，再把original里的值赋回到src里，实现分屏加载。

　　但问题就出在调用上，lazyload的调用方法是写在$().ready(function(){});里，如：

$().ready( function (){      $( "#tujie img" ).lazyload({          effect : "fadeIn" ,          failurelimit : 5      }); });

　　也就是在页面载入完毕后才调用lazyload，而页面载入完毕后，图片也都下载好了，再去使用lazyload已经没有必要，反而就会出现上面说的那种状况：一共只有2张图片，却向服务器请求了3次，下载了3张图片，拔苗助长。

　　网上有篇修改jquery.lazyload的文章，你们能够搜搜，不过我试了下，仍是不行，直接不加载了。

　　关于这问题的解决方法，就是换插件，我找到另外一个分屏加载的插件，叫：jquery.scrollLoading，具体说明能够看下这篇文章《jQuery页面滚动图片等元素动态加载实现》，这个插件真正实现了图片分屏加载。

　　PS：demo页面若是打不开了，能够下载这个demo包，不过测试须要放到服务器上去，本地直接打开，firebug里看不到3次请求的效果。demo点击下载

 

原文连接：http://www.cnblogs.com/hooray/archive/2011/10/15/2212922.html