你还在用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点击下载

手机收藏该文章

作者：胡尐睿丶

出处：正在加载...

本文可任意转载，无版权归属，但希望能注明原文链接。

出于为读者服务的初衷，若读者无法理解文章中某些内容，可通过原文链接找到原作者进行咨询。

更多新浪微博腾讯微博搜狐微博网易微博QQ好友QQ空间微信人人网百度新首页百度贴吧一键分享







转载自：http://www.cnblogs.com/hooray/archive/2011/10/15/2212922.html