jquery實現簡單瀑布流布局（續）：圖片懶加載

---

這篇文章是jquery實現簡單瀑布流布局思想的小小擴展。代碼基於前作的代碼繼續完善。
圖片懶加載就是符合某些條件時才觸發圖片的加載。最常見的具體表現就是，當頁面被請求時，只加載可視區域的圖片，其它部分的圖片只占位而不加載，只有這些圖片出現在可視區域時才會動態加載。具體實現的技術並不復雜，下面分別對其說明。

技術路線

---

• 怎么加載。首先未加載的圖片有一個占位假圖片（一般是loading），按照真實圖片的大小進行樣式化。網上較為常用的思路是對圖片元素的父級定義一個data-src屬性，用來存放該圖片元素的真實src。到用的時候再調用。
• 加載判斷條件：
  首屏一次性加在20張。保證首頁有料。
  后邊的圖片基於以下思路。

往下拉（滾動），找到第一個頂部進入可視區的img，優先加載。

• 監聽位置：
• 滾動條滾動時，這提示需要寫一個新加載的函數。
• 第二個有點難察覺，就是在getlist方法加載瀑布流完結之前。因為getList一旦調用，就意味着有新的圖片進入可視區。不能只靠滾動進行觸發

修改getList函數

function getList(n){
    $.getJSON(createUrl(n),function(data){
        if(data.length==0){
            return false;
        }else{
            for(var i=0;i<data.length;i++){           
                var $html=null;
                if(i<=20&&n==1){//首屏一次加載20張
                    $html=$('<div><img src="'+data[i].preview+'"><p>'+data[i].title+'</p></div>');
                     
                }else{
                    $html=$('<div><img src="images/1.jpg"><p>'+data[i].title+'</p></div>'); 
                    $html.find('img').css('opacity','0'); //占位圖片不透明度為0
                } 

                $('li').eq(getShortestLi()).append($html);
                $html.attr('data-src',data[i].preview);
                $html.find('img').css('height',(data[i].height*225/data[i].width)+'px');
                $html.find('img').css('width','225px'); 

            };
        }

        bCheck=true;    
    });
}

加載真實圖片的執行函數

function loadClientPic(arr){//arr是頁面所有的img標簽。
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

    for(var i=0;i<arr.length;i++){
        if(arr.eq(i).attr('src')=='images/1.jpg'){
            if(arr.eq(i).offset().top<document.documentElement.clientHeight+scrollTop){//進入可視區內！
                arr.eq(i).attr('src',arr.eq(i).parent().attr('data-src'));
                //console.log(i)
                //transition: 1s; opacity: 1
                if(arr.eq(i).attr('src')!=='images/1.jpg'&&arr.eq(i).height()!==0){
                    arr.eq(i).css('transition','1s').css('opacity','1');
                }

            }else{
                //console.log('不在可視區！')               
            }
        }else{
            //console.log('已加載')               
        }                     
    }
};

最后，在監聽位置加上寫好的函數

---

• 在$(window).scroll(function(){})里加上loadClientPic($('img));
• 不要遺漏getList方法結束前也執行loadClientPic。

附錄

---

demo地址 http://djtao.top/ppl/ppl.html

全部代碼:

//找出高度最小li的索引值
function getShortestLi(){
    var shortest=0;
    for(var i=1;i<4;i++){
        if($('li').eq(i).height()<$('li').eq(shortest).height()){
            shortest=i;
        }
    }
    return shortest;
}

function createUrl(num){
    return 'http://www.wookmark.com/api/json/popular?page='+num+'&callback=?';
}


var bCheck=false;
function getList(n){
    $.getJSON(createUrl(n),function(data){
        if(data.length==0){
            return false;
        }else{
            for(var i=0;i<data.length;i++){           
                var $html=null;
                if(i<=20&&n==1){//首屏一次加載20張
                    $html=$('<div><img src="'+data[i].preview+'"><p>'+data[i].title+'</p></div>');
                     
                }else{
                    $html=$('<div><img src="images/1.jpg"><p>'+data[i].title+'</p></div>'); 
                    $html.find('img').css('opacity','0'); //占位圖片不透明度為0
                } 

                $('li').eq(getShortestLi()).append($html);
                $html.attr('data-src',data[i].preview);
                $html.find('img').css('height',(data[i].height*225/data[i].width)+'px');
                $html.find('img').css('width','225px'); 

            };
        }
        loadClientPic($('img'));//函數臨結束執行判斷
        bCheck=true;    
    });
}

$(function(){
    var pageNum=1;
    getList(pageNum);
    $(window).scroll(function(){
        
        var $li=$('li').eq(getShortestLi());
        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
        //console.log([$li.offset().top+$li.height(),document.documentElement.clientHeight+scrollTop])
        //如果li高度與li到頁面頂部的高度之和<可視區高度+滾動距離
        if($li.offset().top+$li.height()<document.documentElement.clientHeight+scrollTop){
            if(bCheck){
                bCheck=false;
                pageNum++;

                //console.log(pageNum);
                getList(pageNum); 
            }else{
                return false;
            }
            
        }

        loadClientPic($('img'));
    })
})

function loadClientPic(arr){
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

    for(var i=0;i<arr.length;i++){
        if(arr.eq(i).attr('src')=='images/1.jpg'){
            if(arr.eq(i).offset().top<document.documentElement.clientHeight+scrollTop){//進入可視區內！
                arr.eq(i).attr('src',arr.eq(i).parent().attr('data-src'));
                //console.log(i)
                //transition: 1s; opacity: 1
                if(arr.eq(i).attr('src')!=='images/1.jpg'&&arr.eq(i).height()!==0){
                    arr.eq(i).css('transition','1s').css('opacity','1');
                }
                
            }else{
                //console.log('不在可視區！')               
            }
        }else{
            //console.log('已加載')               
        }                     
    }
};

看着那些圖片，不由得再感嘆一句，歪果仁太會玩了..