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

　　2015年6月29日更新：本文章发布时间较早，不建议继续阅读，并且该插件后续已经修复此问题，大家可以放心使用。

　　2015年9月9日更新：文章有毒，别看！

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