1.导入JS插件
<script src="jQuery.js" type="text/JavaScript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
2.在你的页面中加入如下的javascript
- $("img").lazyload({
- threshold : 200,
- placeholder : "images/grey.gif",
- effect : "fadeIn"
- });
img 标签 src 则用一个很小的 图片来 占位。 然后等页面加载完后在通过代码 在滚动到 相应图片位置的时候 才去把 img 的src 设置为对应的地址。需要设置图片的width,height属性
之前在做一个图片浏览效果时，要看后面的小图必须等到前面的加载完，而且大图的位置是在大量的小图后面，导致大图要等到小图都加载完才能显示，为了解决这个问题，就想到了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函数作为筛选程序：
- var getSrc = opt.getSrc,
- filter = $$F.bind( this._filter, this,
- opt["class"],
- getSrc ? function(img){ return getSrc(img); }
- : function(img){ return img.getAttribute( attribute ) || img.src; },
- opt.holder
- );
- this._elems = $$A.filter(
- opt.images || container.getElementsByTagName("img"), filter
- );
这里的filter其实是包装了筛选样式cls、获取src的方法getSrc和占位图holder三个参数的_filter筛选程序。
在_filter程序中，会对图片集合进行筛选和整理。
如果自定义了"class"筛选样式，会自动排除样式不对应的图片：
- if ( className && (" " + img.className + " ").indexOf(" " + className + " ") == -1 ) return false;
如果有自定义getSrc会优先使用。
没有的话，再通过保存原图地址的_attribute自定义属性从元素获取。
最后才直接从元素的src属性获取。 接着排除src不存在的：
- if ( !src ) return false;
- if ( src == img.src ) {
- if ( img.complete || $$B.chrome || $$B.safari ) return false;
- img.removeAttribute("src");
- }
如果complete为true，说明图片已经载入完成了，可以排除；
如果是chrome或safari，不能取消当前加载，所以也排除掉（具体看图片的HTTP请求部分）。
否则，用removeAttribute移除src属性来取消图片当前的加载。
- if ( holder ) { img.src = holder; }
- img.setAttribute( this._attribute, src );
【图片加载】
ImagesLazyLoad相比LazyLoad，已经实现了_onLoadData加载程序，不需要再自己定义加载。
在_onLoadData程序中，主要是用来显示图片。
在_hasAttribute方法中是这样判断的：
- this._hasAttribute = $$B.ie6 || $$B.ie7
- ? function(img){ return attribute in img; }
- : function(img){ return img.hasAttribute( attribute ); };
为了保证兼容性，程序会优先使用attribute的方式来操作自定义属性。
当img有_attribute自定义属性时，就用getAttribute来获取原图地址，并设置img的src，在用removeAttribute来移除自定义属性。
移除的意义在于，当有多个实例使用同一个元素时，能保证图片加载一次后就不会重复加载，即防止实例间的冲突。
【图片的HTTP请求】
这里说说开发过程中发现的一些关于图片加载的问题。
首先是加载空字符串的问题，如果给img的src设为空字符串的话，可能会得到意料之外的结果。
例如在 http://xxx/test.htm 里面的 <img src=""> 会发生以下情况：
ie 会产生相对地址的请求，即：http://xxx/
Safari/Chrome 会产生当前页面地址的请求，即：http://xxx/test.htm
Opera/Firefox 不会产生请求
详细参考Nicholas C. Zakas的“Empty image src can destroy your site ”。
如果不想加载图片，不应该把src设为空值，因为还可能会发出请求，浪费资源。
可以像程序那样，通过removeAttribute来移除就行了。
还有一个问题是在Safari和Chrome，由于webkit内核的bug ，正在加载的图片并不能取消加载。
所以程序在取消图片加载的部分，如果是Safari或Chrome会继续加载，不进行延迟。
这个问题最初从lifesinger的datalazyload 的说明部分看到的，具体可以自己用Fiddler来测试。
更多相关资料可以参考lifesinger的“图片的HTTP请求 ”。
【继承结构】
程序用wrapper来做继承，详细参考工具库的说明 。
先用wrapper给ImagesLazyLoad包装（继承）LazyLoad：
- var ImagesLazyLoad = $$.wrapper(function(options) {
- ...
- }, LazyLoad);
- $$.extend( ImagesLazyLoad.prototype, {
- ...
- });
- return LazyLoad.prototype._setOptions.call(this, $$.extend({
- ...
- }, $$.extend( options, {
- onLoadData: this._onLoadData
- })));
其中第一个参数是子类的可选属性，第二个参数是子类定义的属性，即不再是可选而是由程序来定义的属性。
总体来说，这是个简陋的继承，等以后积累了一定经验再来扩展吧。
使用技巧
【设置src】
有几个方法可以设置原图地址：
1，正常设置src：渐进增强，不支持js时也能显示，但chrome和safari有bug，不支持这种方式；
2，把原图地址设置到自定义属性中：所有浏览器都兼容，但在不支持js时图片不能显示；
3，用自定义函数获取：使用在比较复杂的情况，需要手动设置。
具体还是要根据实际情况来选择。
【设置holder】
如果使用了holder占位图，程序会自动设置图片元素显示占位图。
推荐使用loading图片来设置，但loading图往往跟原图的尺寸是不同的。
如果img设置了原图宽高，又想保持loading图的尺寸，把它设为背景就可以了。
但这样在ie下，不设置src默认会有一个小图标。
要去掉这个小图标可以设置holder为一个透明图片的链接，或者参考这里的TRANSPARENT “做”一个透明图片。
实例中也是这样设置的，可以参考一下。
【执行程序】
千万不能在window.onload中执行，因为那时图片都已经加载完了。
而应该在容器后面（window的话是文档结尾）或DOMContentLoaded中执行。
