百度搜索“图片分屏加载”，映入眼帘的就是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