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

posted @ 2011-10-15 12:56 胡尐睿丶 阅读(...) 评论(...) 编辑 收藏