【原创】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部分功能不支持。
前台效果预览
完整实例下载
[解决办法]
sf
[解决办法]
一早,来了...
[解决办法]
赶上了，先占座
[解决办法]
飘过，占个位~~~~
[解决办法]
好 顶
我发了封邮件给你 你快点看一下.......................
[解决办法]
楼主总是给人带来惊喜...
[解决办法]
赞```
[解决办法]
[解决办法]
~~~~~~~~jF
[解决办法]
顶
好东东啊
[解决办法]
强烈支持...............
[解决办法]
很帅， 很酷，很拽。
[解决办法]
我刚才看了下
速度好快啊
[解决办法]
[解决办法]
好，再顶一下
[解决办法]
.......................
[解决办法]
#4楼 得分：0回复于：2010-03-08 09:41:23一早,来了...
[解决办法]
顶一下下
[解决办法]
xiexielouzhufenxiang
[解决办法]
接分，楼主很厉害
[解决办法]
看来我是错过了哈
[解决办法]
您又有成果了哈
[解决办法]
学习了，哈哈
[解决办法]
学习了，还是比较难，谢谢分享！
[解决办法]
学习了，哈哈
[解决办法]
Nice! Very Good!
[解决办法]
飘过，占个位~~~~
[解决办法]
看看啊
[解决办法]
多谢多谢。。。。
------解决方案--------------------
照片的美女是啊?
[解决办法]
照片的美女是啊?
[解决办法]
jf.....................................
[解决办法]
你这个好麻烦啊……我也写了一个欢迎评论！！！！！！http://www.cnblogs.com/jacd/archive/2010/03/25/1696085.html
[解决办法]
好贴 顶一下。。。。
[解决办法]
mark
[解决办法]
nb[b][/b]
[解决办法]
哈，不好意意思，我是来看图片的。
[解决办法]
顶一下
[解决办法]
下来看看
[解决办法]
有没电子单片机的高手啊。。。。。。。
[解决办法]
对于牛逼的东西，我总是要做个记号
[解决办法]
强力顶起.
[解决办法]
坚持每天回帖子
[解决办法]
喂喂喂
[解决办法]
不错阿...谢谢了
[解决办法]
好东东，收藏之。。。
[解决办法]
学习学习!
[解决办法]
不错！！很好啊！学习学习~~~~
[解决办法]
路过，看不懂
[解决办法]
好定西。收藏
[解决办法]
哇！ 楼主你太有才了
[解决办法]
谢谢楼主，
收藏一下，呵呵，，，
[解决办法]
看看先~~~~~~..
[解决办法]
恩，知道了
[解决办法]
好东西啊
一定要顶的......................
[解决办法]
好东西啊，顶。
[解决办法]
[解决办法]
jf~~~~~~~~
[解决办法]
不错~
[解决办法]
[解决办法]
顶起了！收下了
[解决办法]
太深奥了，愣是没搞懂
[解决办法]
你杂就这么厉害呢
[解决办法]
传说中的AV WEB？
[解决办法]
学习了，赞一个
[解决办法]
不错，有学习才进步
[解决办法]
看看。。。。。。。
[解决办法]
好也啊。。。。。。。。。。。。。。。。
[解决办法]
这么好的贴子没看到
[解决办法]
阿弥陀佛,
学习学习
断恶修善,灾消福来.
人心善风调雨顺
阿弥陀佛
[解决办法]
老实说我不喜欢JScript还用纯正的JS会比较好。
我感觉他和JQUERY差不多。
[解决办法]
收藏着，等着用……
[解决办法]
学习，收藏了，
[解决办法]
接分，飘过～～～～～
[解决办法]
强烈支持！！！！！！！！！！！
[解决办法]
原来是这样实现的啊，赞一个！~~~~~
[解决办法]
var ImagesLazyLoad = $$.wrapper(function(options) {
this._initialize( options );
//如果没有元素就退出
if ( this.isFinish() ) return;
//初始化模式设置
this._initMode();
//进行第一次触发
this.resize(true);
}, LazyLoad);
$$.extend( ImagesLazyLoad.prototype, {
//初始化程序
_initialize: function(options) {
LazyLoad.prototype._initialize.call(this, [], options);
//设置子类属性
var opt = this.options;
this.onLoad = opt.onLoad;
var attribute = this._attribute = opt.attribute;
//设置加载图片集合
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 || this._container.getElementsByTagName("img"), filter
);
//判断属性是否已经加载的方法
this._hasAttribute = $$B.ie6 || $$B.ie7
? function(img){ return attribute in img; }
: function(img){ return img.hasAttribute( attribute ); };
},
//设置默认属性
_setOptions: function(options) {
return LazyLoad.prototype._setOptions.call(this, $$.extend({//默认值
images: undefined,//图片集合
attribute: "_lazysrc",//保存原图地址的自定义属性
holder: "",//占位图
"class": "",//筛选样式
getSrc: undefined,//获取原图地址程序
onLoad: function(){}//加载时执行
}, $$.extend( options, {
onLoadData: this._onLoadData
})));
},
//筛选整理图片对象
_filter: function(cls, getSrc, holder, img) {
if ( cls && img.className !== cls ) return false;//排除样式不对应的
//获取原图地址
var src = getSrc(img);
if ( !src ) return false;//排除src不存在的
if ( src == img.src ) {
//排除已经加载或不能停止加载的
if ( img.complete || $$B.chrome || $$B.safari ) return false;
img.removeAttribute("src");//移除src
}
if ( holder ) { img.src = holder; }
//用自定义属性记录原图地址
img.setAttribute( this._attribute, src );
return true;
},
//显示图片
_onLoadData: function(img) {
var attribute = this._attribute;
if ( this._hasAttribute( img ) ) {
img.src = img.getAttribute( attribute );
img.removeAttribute( attribute );
this.onLoad( img );
}
}
});
[解决办法]
学习，受教了！
[解决办法]
学习一下
[解决办法]
不错 顶一个
[解决办法]
强。。。。。
[解决办法]
很不错，收藏了。
[解决办法]
学习了
[解决办法]
牛人，学习啊