图片延迟加载jQuery实现源码

方案一

定义js文件，内容如下

/**
* 图片延迟加载
*/
var lazyLoad = {
/**
* 初始化函数，获得当前页面中含有lazyload属性的img标签
*/
Init: function () {
return $("img[lazyload]");
},
/**
* 计算函数，计算img到浏览器顶部的距离，如果距离一样就放到同一个数组中
*/
Calculate: function (lazyloadobject) {
/**
* 获得浏览器中可见区域的高度
*/
var windowHeight = $(window.parent).height();
var arrReturn = {};
var _scrollTop;
if (lazyloadobject.length == 0) {
return null;
}
else {
/**
* 依次循环当前页面中所有的img对象
*/
lazyloadobject.each(function (i) {
/**
* 计算img到浏览器顶部的距离
*/
_scrollTop = parseInt($(this).offset().top) + $(window.parent.document).find("iframe[id=zhy_iframe]").offset().top;
if (!arrReturn.hasOwnProperty(_scrollTop)) {
arrReturn[_scrollTop] = new Array();
}
/**
* 距离一样就放到同一个数组中
*/
arrReturn[_scrollTop].push($(this));
});

/**
* 获得图片的高度
*/
this.ImgHeight = $(lazyloadobject[0]).attr("height");
/**
* 处理好以后的img对象数组
*/
this.ArrLoad = arrReturn;
return arrReturn;
}
},
ArrLoad: null,
/**
* 图片高度
*/
ImgHeight: null,
/**
* 进行图片的加载
*/
IsLoad: function (scrolltop, objectstop) {
/**
* 浏览器可见区域底部的高度
*/
var maxScrollTop = parseInt(scrolltop + $(window.parent).height());

if (objectstop != null && objectstop != {}) {
for (i in this.ArrLoad) {
/**
* 如果图片在可见区域类，就进行图片的加载，否则就不进行加载
*/
if (parseInt(i) + this.ImgHeight >= scrolltop && parseInt(i) <= maxScrollTop && 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.parent).scrollTop(), arrScrollTop);
/**
* 触发浏览器滚动条滚动事件
*/
$(window.parent.document).scroll(function () {
_this.IsLoad($(this).scrollTop(), arrScrollTop);
});
}
}
}

$(function() {
setTimeout(function() {
lazyLoad.Run();
}, 1000);
});

引用Demo：

1.导入js

2.<imgsrc="imgs/default.jpg" lazyload="<s:property value="#appinfo.icoUri"/>">

方案二

定义js文件（jquery.scrolloading.js），内容如下

// JavaScript Document
/*
* jquery.scrolloading.js
* by yvesyu
* 2011-11-04 v1.0
*/
(function($) {
$.fn.scrolloading = function(options){
var defaults = {
attr: "data-url"
};
var params = $.extend({}, defaults, options || {});
params.cache = [];
$(this).each(function(){
var node = this.nodeName.toLowerCase(), arg = $(this).attr(params["attr"]);
if (!arg) { return; }
//节点数据元
var data = {
obj: $(this),
tag: node,
arg: arg
};
params.cache.push(data);
});

//动态加载数据
var loading = function(){
var st = $(window).scrollTop();
var sth = st + $(window).height();
$.each(params.cache, function(i, data){
var o = data.obj;
if(o){
var post = 0, posb = 0;
try{
post = o.offset().top;
posb = post + o.height();
}catch(ex){}
if((post > st && post < sth) || (posb > st && posb < sth)){
var tag = data.tag, arg = data.arg;
//在浏览器可见区域内
if(tag === "img"){
if(!o.attr("src")){
o.attr("src", $.trim(arg));
}
}else{
//o.load(arg);
eval(arg + "()");
}
data.obj = null;
}
}
});
return false;
};

//加载完毕即执行
loading();
//滚动执行
$(window).bind("scroll", loading);
};
})(jQuery);