延时加载图片(优化版)

在上一篇文章（http://www.cnblogs.com/windinsky/archive/2010/07/09/1774354.html）中，探讨了一下页面图片延时加载的方法，今天重新看了一遍代码，发现其实不必写的那么麻烦，也用不到数组，做了一下修改，精简了一些无用的代码。

延时加载原理：

1、将需要延时加载的图片的src属性去除，新添一个自定义的属性如lazyload，将图片路径存于lazyload属性中。如下

<img lazyload="img/bmw_m1_hood.jpg?1277878639" />

2、Js预加载第一张图片，将lazyload的值赋予img的src属性，并移除lazyload属性。如下

<img src="img/bmw_m1_hood.jpg?1277878639" />

3、为window对象添加scroll（页面滚动）事件，每次触发事件时，计算目前页面中第一张需要延时加载图片的位置是否在可视区域，若在可视区域，将lazyload的值赋予img的src属性，并移除lazyload属性。

以下是经过优化的代码

///<reference path="jquery-1.4.1-vsdoc.js" />
var lazyLoad = {
/// <summary>
/// img标签中的存放图片路径的自定义属性名称
/// </summary>
AttributeName: "lazyload",
/// <summary>
/// 初始化。自动加载第一张图片。
/// </summary>
Init: function (v) {
if (v != undefined && v != null && typeof (v) == "string") {
this.AttributeName = v;
}

if ($("img[" + this.AttributeName + "]").size() > 0) {
var src = $("img[" + this.AttributeName + "]").eq(0).attr(this.AttributeName);
$("img[" + this.AttributeName + "]").eq(0).attr("src", src);
$("img[" + this.AttributeName + "]").eq(0).removeAttr(this.AttributeName);
}
},
/// <summary>
/// 当scroll事件被触发时，进行加载图片的操作
/// </summary>
LoadImage: function (scrolltop) {
//获取目前第一张需延迟加载的图片，无图片的话就终止
var currentObj = null;
if ($("img[" + this.AttributeName + "]").size() > 0) {
currentObj = $("img[" + this.AttributeName + "]").eq(0);
}
else {
return false;
}

//获取窗体的高度
var windowHeight = $(window).height();
//获取当前图片相对于页面顶部的偏移量
var _scrollTop = currentObj.offset().top - windowHeight + currentObj.height();
//根据scrollTop判断是否显示图片
if (parseInt(scrolltop) >= parseInt(_scrollTop)) {
var src = currentObj.attr(this.AttributeName);
currentObj.attr("src", src);
currentObj.removeAttr(this.AttributeName);
}
},
/// <summary>
/// 启动延时加载
/// <params key="v">img标签中的存放图片路径的自定义属性名称</params>
/// </summary>
Run: function (v) {
this.Init(v);

var _this = this;
if ($("img[" + this.AttributeName + "]").size() > 0) {
$(window).bind("scroll", function () {
_this.LoadImage($(this).scrollTop());
});
}
}
};
有兴趣的朋友按上篇文章的方法用firebug测测，效果依旧！