给动态加载的图片添加延迟加载（附在线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;　　　　　　　　　　　　　　　　       //添加以加载属性
                        }
                    });                   
    

 

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