jQuery图片延迟加载解决方法

今天看到乐淘网图片延迟加载，感觉很好！具体效果：

效果：

1、图片没加载时，有一个正在加载中的动态图片

2、只加载一部分图片，即加载让用户看到的图片，当拖动滚动条时，再加载其他图片

好处：

这样可以大大的减少服务器负担，特别对于图片库这个东西，有时候用户只看第一屏的图片，没必要全部把图片都加载出来，加载一部分，即可以减少服务器负担又可以让用户少了等待的时间！

想看看其方法，通过查看代码发现了另一种解决之道。

方法：

第一步：定义样式，此步骤为了在图片还未完全加载，显示一个动态的正在加载中的图片

假如：图片放在<div class=’imgList’><ul><li><a>图片</a></li></ul></div>

样式为：

<style type="text/css">
.imgList ul{ list-style:none; margin:0px; padding:0px }
.imgList ul li{ list-style:none; margin:0px; padding:0px; display:inline}
.imgList ul li a
{
background: url(/images/Loading/ajax-loader.gif) no-repeat 50% 50%;
width:160px; height:80px; display:block;
}
.imgList ul li a img{ width:160px; height:80px;}
</style>

第二步：定义img

<img src='1*1像素图片' lazyload='真实图片url' />

第三步：写延迟加载js

var lazyLoad = {
Init: function () {
return $("img[lazyload]");
},
Calculate: function (lazyloadobject) {
var windowHeight = $(window).height();
var arrReturn = {};
var _scrollTop;
if (lazyloadobject.length == 0) {
return null;
}
else {
lazyloadobject.each(function (i) {
_scrollTop = parseInt($(this).offset().top - windowHeight);
if (!arrReturn.hasOwnProperty(_scrollTop)) {
arrReturn[_scrollTop] = new Array();
}
arrReturn[_scrollTop].push($(this));
});
this.ArrLoad = arrReturn;
return arrReturn;
}
},
ArrLoad: null,
IsLoad: function (scrolltop, objectstop) {
if (objectstop != null && objectstop != {}) {
for (i in this.ArrLoad) {
if (parseInt(i) <= scrolltop && this.ArrLoad.hasOwnProperty(i)) {
for (j = 0; j < this.ArrLoad[i].length; j++) {
this.ArrLoad[i][j].attr("src", this.ArrLoad[i][j].attr("lazyload")).removeAttr("lazyload");
}
delete this.ArrLoad[i];
}
}
}
},
Run: function () {
var lazyLoadObject = this.Init();
this.Calculate(lazyLoadObject);
arrScrollTop = this.ArrLoad;
if (arrScrollTop == null) {
return false;
}
else {
var _this = this;
_this.IsLoad($(window).scrollTop(), arrScrollTop);
$(window).scroll(function () {
_this.IsLoad($(this).scrollTop(), arrScrollTop);
});
}
}
}
$(function () {
lazyLoad.Run();
});

$(window).resize(function () {
lazyLoad.Run();
});

特别备注：

PS：别忘记引用jquey类库

具体效果如图：