給動態加載的圖片添加延遲加載（附在線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;　　　　　　　　　　　　　　　　       //添加以加載屬性
                        }
                    });                   
    

 

 

 

如果還有更好的實現方式，或性能更好的寫法，歡迎指點