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

作者: 胡尐睿丶 发表于 2011-10-15 12:56 原文链接

评论: 13　查看评论　发表评论

最新新闻：
· iPad 3将于明年3月正式发布，产量将有所增加(2011-10-16 01:12)
· 营造类似黑客帝国360度旋转特效的全景照相机(视频)(2011-10-16 01:11)
· 50 人的 Google 自动驾驶汽车团队已经在跟主流汽车厂商讨论生产真车(2011-10-16 01:10)
· 三星律师未能在法庭上区分出iPad和Galaxy Tab(2011-10-16 01:10)
· Facebook变更用户量统计方法 Zynga受影响(2011-10-15 18:32)

编辑推荐：那些曾伴我走过编程之路的软件

网站导航：博客园首页  我的园子  新闻  闪存  小组  博问  知识库