给动态加载的图片添加延迟加载（附在线demo)

功能需求：

　　当滚动条拖动页面底部时用js将数据拼装成html插入页面中，由于每次获取的图片数据比较多（一次50张图片吧)，所以必须给图片添加延迟加载。

这是最近在公司做的一个功能，以下是我的解决思路和代码，欢迎高手指正。

解决思路：

由于滚动加载还是比较简单的，主要讲下怎么实现图片的延迟加载。

简单的思路就是把每次动态添加的图片对象都保存在一个数组里，当滚动的时候遍历数组，获得图片相对窗口的偏移量offset().top去减去一个高度,

如果小于当前滚动条的高度就给图片添加src属性，并设置一个值代表图片已经加载。再将已加载过的图片从数组中删除。

以下是测试的代码，在线demo点击这里 源码下载

测试数据

var data=[['<div class="imgbox"><img original="img/1.jpg"></div>','<div class="imgbox"><img original="img/2.jpg"></div>','<div class="imgbox"><img original="img/3.jpg"></div>',
'<div class="imgbox"><img original="img/4.jpg"></div>','<div class="imgbox"><img original="img/5.jpg"></div>','<div class="imgbox"><img original="img/6.jpg"></div>',
'<div class="imgbox"><img original="img/10.jpg"></div>'],
['<div class="imgbox"><img original="img/11.jpg"></div>','<div class="imgbox"><img original="img/12.jpg"></div>','<div class="imgbox"><img original="img/13.jpg"></div>',
'<div class="imgbox"><img original="img/14.jpg"></div>','<div class="imgbox"><img original="img/15.jpg"></div>','<div class="imgbox"><img original="img/16.jpg"></div>',
'<div class="imgbox"><img original="img/17.jpg"></div>']];

<script>
$(document).ready(function(){
var curpage=1,pageCount=2,imgarray =new Array();
var threshold =400;　　　　　　　　　　　　　　　　　　//获得可视范围下多少像素的图片　
$(window).bind('scroll',
function() {
var sh = document.body.scrollHeight;    //获得页面内容的高度
var ch = document.documentElement.clientHeight;　　//获得可见区域高度
var ss = document.documentElement.scrollTop + document.body.scrollTop; //获得滚动条滚过的高度
if (ss + ch +300 >= sh) {
if (curpage <= pageCount) {
　　　　　　　　　　　　　　var container = $("#container");
var html =data[curpage-1];
$.each(html,function(i){
var obj = $(html[i]);
var img = obj.find("img");
imgarray.push(img);　　　　//将图片对象放入数组
container.append(obj);

})
curpage++;
} else $(this).unbind('scroll');
}

//延迟加载图片
if (imgarray.length != 0) {

//删除以加载的图片
var temp = $.grep(imgarray,
function(element) {
return !element.loaded;
});
imgarray = $(temp);

$(imgarray).each(function() {
var self = this;
if ($(self).offset().top - threshold < ss+ch) {　　　　　　//获得可视范围下400px的图片
$(self).attr("src", $(self).attr("original"));       //添加src属性
self.loaded = true;　　　　　　　　　　　　　　　　       //添加以加载属性
}
});

如果还有更好的实现方式，或性能更好的写法，欢迎指点