ImagesLazyLoad 图片延迟加载效果

之前在做一个图片浏览效果时，要看后面的小图必须等到前面的加载完，而且大图的位置是在大量的小图后面，导致大图要等到小图都加载完才能显示，为了解决这个问题，就想到了Lazyload效果。
现在很多网站都用了类似的效果，如淘宝、Bing等。
这个图片延迟加载效果是在Lazyload的基础上扩展的，主要扩展了获取img元素，获取src和图片加载的部分。

兼容：ie6/7/8, firefox 3.5.5, opera 10.10, safari 4.0.4, chrome 3.0
其中safari和chrome部分功能不支持。

效果预览

程序说明

【获取图片】

先定义filter函数作为筛选程序：

然后用这个filter函数筛选出需要的图片集合：

如果要自定义图片集合可以在程序可选参数的images属性来设置，否则自动从容器获取img元素作为图片集合。

这里的filter其实是包装了筛选样式cls、获取src的方法getSrc和占位图holder三个参数的_filter筛选程序。
在_filter程序中，会对图片集合进行筛选和整理。
如果自定义了"class"筛选样式，会自动排除样式不对应的图片：

再用getSrc获取原图地址，即实际要显示的图片地址。
如果有自定义getSrc会优先使用。
没有的话，再通过保存原图地址的_attribute自定义属性从元素获取。
最后才直接从元素的src属性获取。

接着排除src不存在的：

要注意处理原图地址就是元素当前src的情况：

如果complete为true，说明图片已经载入完成了，可以排除；
如果是chrome或safari，不能取消当前加载，所以也排除掉（具体看图片的HTTP请求部分）。
否则，用removeAttribute移除src属性来取消图片当前的加载。

如果设置了holder占位图，就重新设置图片src：

最后把原图地址记录到元素的_attribute自定义属性中：

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!