【www.bbyears.com--jquery】
首先是加载空字符串的问题，如果给img的src设为空字符串的话，可能会得到意料之外的结果。
例如在 http://xxx/test.htm 里面的 会发生以下情况：
ie 会产生相对地址的请求，即：http://xxx/
Safari/Chrome 会产生当前页面地址的请求，即：http://xxx/test.htm
Opera/Firefox 不会产生请求
实例
代码如下
<script type="text/javascript">
//限定加载范围 从第2张开始到第12张 结束
var index_n=1;
x=0;
$(document).ready(function(){
$(window).scroll(function() {
x++;
if(x%3==0){
// 滚动高度超过3次，加载图片
$(".imgleft img:eq("+index_n+")").each(function(){
$(this).attr("src",$(this).attr("original"));
});
index_n++
}
//限定加载范围 从第2张开始到第12张 结束
if(index_n==13){
$(window).unbind("scroll");
return;
}
});
});
</script>
//不知道鼠标滚动发送的次数是否一样 所以可能有的鼠标会不兼容
利用jquery的ImagesLazyLoad实现 图片延迟加载效果
【获取图片】
先定义filter函数作为筛选程序：
filter = $$F.bind( this._filter, this,
opt["class"],
getSrc ? function(img){ return getSrc(img); }
: function(img){ return img.getAttribute( attribute ) || img.src; },
opt.holder
);
然后用这个filter函数筛选出需要的图片集合：
opt.images || container.getElementsByTagName("img"), filter
);
如果要自定义图片集合可以在程序可选参数的images属性来设置，否则自动从容器获取img元素作为图片集合。
这里的filter其实是包装了筛选样式cls、获取src的方法getSrc和占位图holder三个参数的_filter筛选程序。
在_filter程序中，会对图片集合进行筛选和整理。
如果自定义了"class"筛选样式，会自动排除样式不对应的图片：
再用getSrc获取原图地址，即实际要显示的图片地址。
如果有自定义getSrc会优先使用。
没有的话，再通过保存原图地址的_attribute自定义属性从元素获取。
最后才直接从元素的src属性获取。
接着排除src不存在的：
要注意处理原图地址就是元素当前src的情况：
代码如下 if ( src == img.src ) {if ( img.complete || $$B.chrome || $$B.safari ) return false;
img.removeAttribute("src");
}
如果complete为true，说明图片已经载入完成了，可以排除；
如果是chrome或safari，不能取消当前加载，所以也排除掉（具体看图片的HTTP请求部分）。
否则，用removeAttribute移除src属性来取消图片当前的加载。
如果设置了holder占位图，就重新设置图片src：
最后把原图地址记录到元素的_attribute自定义属性中：
img.setAttribute( this._attribute, src );
逐个图片元素筛选整理后，就得到要加载的图片集合了。
【图片加载】
ImagesLazyLoad相比LazyLoad，已经实现了_onLoadData加载程序，不需要再自己定义加载。
在_onLoadData程序中，主要是用来显示图片。
先用_hasAttribute方法判断是否有_attribute自定义属性。
在_hasAttribute方法中是这样判断的：
? function(img){ return attribute in img; }
: function(img){ return img.hasAttribute( attribute ); };
由于ie6/7跟其他浏览器对attribute和property的理解不同，所以要分开处理，详细参考这里的attribute/property。
为了保证兼容性，程序会优先使用attribute的方式来操作自定义属性。
当img有_attribute自定义属性时，就用getAttribute来获取原图地址，并设置img的src，在用removeAttribute来移除自定义属性。
移除的意义在于，当有多个实例使用同一个元素时，能保证图片加载一次后就不会重复加载，即防止实例间的冲突。
实例
代码如下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 );
}
}
});