图片延迟技术一般的思路
1.现将img元素对应的src路径设置为背景图片，而该img所对应的url路径存放在一个自设的属性中（以便进行src替换）。
2.获取卷轴的高度和窗口的高度
3循环需要延迟加载的img数组，获取img的高度，判断该元素是否在可视窗口内。若该元素在可视窗口内，则进行src替换
一下为测试代码
html
复制代码 代码如下:
js部分
复制代码 代码如下:
var imgsglobal=[
http://cdn.duitang.com/uploads/item/201306/07/20130607171626_qkc3t.thumb.600_0.jpeg,
http://img4.duitang.com/uploads/item/201306/07/20130607172438_teijr.jpeg,
http://cdn.duitang.com/uploads/item/201306/08/20130608190311_bywca.thumb.600_0.jpeg,
http://g-ec4.images-amazon.com/images/g/28/book-catalog/liaoxiaojun/b003u5taty_01_amzn.jpg,
http://www.yishun.net/tuysl3r1exnpbwcwnc50yw9iyw9jzg4uy29tl2ltz2v4dhjhl2k0lzc0mdy1mdazmi9uml9hbmvyanrhwfhywfhywfhfise3nda2ntawmziuanbn.jpg,
http://www.yishun.net/tuysl3r1exnpbwcwmy50yw9iyw9jzg4uy29tl2ltz2v4dhjhl2kzlzc0mdy1mdazmi9umkvhbf9yavhjwfhywfhywfhfise3nda2ntawmziuanbn.jpg,
http://img4.duitang.com/uploads/item/201306/08/20130608190125_3kfty.jpeg,
http://img4.duitang.com/uploads/item/201304/29/20130429142901_sqjjv.thumb.600_0.jpeg,
http://img4.duitang.com/uploads/item/201112/04/20111204170801_fibkm.jpg,
http://img2.duitang.com/uploads/item/201211/06/20121106233027_ldqas.thumb.600_0.jpeg,
http://i2.sinaimg.cn/gm/2011/0127/u5238p115dt20110127111837.jpg,
http://img2.duitang.com/uploads/item/201209/24/20120924162953_hlpje.jpeg,
http://wenwen.soso.com/p/20110624/20110624085901-745594320.jpg,
http://img4.duitang.com/uploads/item/201206/15/20120615185646_uzmrt.thumb.600_0.jpeg,
http://img4.duitang.com/uploads/item/201202/11/20120211213039_u4sj8.thumb.600_0.jpg,
http://cdn.duitang.com/uploads/item/201201/25/20120125145922_n4vz8.thumb.600_0.jpg
];
function addimgele(){
var str='';
for(var i=0, len=imgsglobal.length; istr+=''
}
$(#showimg).append(str);
}
$(document).ready(function(){
addimgele();
});
(function(win){
var lazyload=win['lazyload']||{};
var camelize = function (s) {
return s.replace(/-(\w)/g, function (strmatch, p1) {
return p1.touppercase();
});
};
lazyload={
init:function(imgclass){
var offsetpage = window.pageyoffset ? window.pageyoffset : window.document.documentelement.scrolltop,
offsetwindow = offsetpage + number(window.innerheight ? window.innerheight : document.documentelement.clientheight);
var imgeles=imgclass;
for(var i=0, len=imgeles.length; iif(imgeles[i].getattribute(resrc)==show){
continue;
}
var o=imgeles[i];
if(o){
postpage = o.getboundingclientrect().top + window.document.documentelement.scrolltop +window.document.body.scrolltop;
postwindow = postpage + number(this.getstyle(o, 'height').replace('px', ''));
if ((postpage > offsetpage && postpage offsetpage && postwindow var src=o.getattribute(resrc);
o.setattribute(src, src);
o.setattribute(resrc, show);
}
}
}
},
getstyle:function (element, property) {
if (arguments.length != 2) return false;
var value = element.style[camelize(property)];
if (!value) {
if (document.defaultview && document.defaultview.getcomputedstyle) {
var css = document.defaultview.getcomputedstyle(element, null);
value = css ? css.getpropertyvalue(property) : null;
} else if (element.currentstyle) {
value = element.currentstyle[camelize(property)];
}
}
return value == 'auto' ? '' : value;
}
}
win.lazyload=lazyload;
})(window);
$(document).ready(function(){
lazyload.init($(img.lazyimg));
window.onscroll=function (){
lazyload.init($(img.lazyimg));
}
});