懶加載 lazy load

      懶加載(Load On Demand)是一種獨特而又強大的數據獲取方法,它可以在用戶滾動頁面的時候自動獲取更多的數據,

而新獲得的數據不會影響原有數據的顯示,同時最大程度上減小服務器端的資源耗用。

      好比，用戶滾動到相應位置時，顯示相應的圖片，不然不加載！！！

      下面是一個圖片懶加載的示例.

      這個html文件上含有許多div標籤，一個div標籤下要添加一個子標籤img用來顯示一個圖片，若是頁面載入時所有從服

務器端下載圖片資源，無疑十分耗費時間，因此咱們將採用圖片懶加載的方式，使用戶滾動到當前位置時才加載該位置的圖

片。

     首先，在html中咱們要藉助自定義屬性data-src來保存圖片的資源地址

     即全部的要顯示圖片的div標籤加上一個data-src屬性

<div class="lazyDone" data-src="http://你的圖片資源地址0"></div>
<div class="lazyDone" data-src="http://你的圖片資源地址1"></div>
<div class="lazyDone" data-src="http://你的圖片資源地址2"></div>
<div class="lazyDone" data-src="http://你的圖片資源地址3"></div>
<div class="lazyDone" data-src="http://你的圖片資源地址4"></div>
<div class="lazyDone" data-src="http://你的圖片資源地址5"></div>
<div class="lazyDone" data-src="http://你的圖片資源地址6"></div>
<div class="lazyDone" data-src="http://你的圖片資源地址7"></div>
<div class="lazyDone" data-src="http://你的圖片資源地址8"></div>
<div class="lazyDone" data-src="http://你的圖片資源地址9"></div>

     在咱們的js中就能夠進行處理，識別出這些帶有data-src標籤的div。而後計算該位置到頁面頂部的距離，判斷用戶是否

滾動到該位置，若是達到則取出它的data-src的value，建立一個子標籤img，將div的data-src的值賦值給img的src屬性。

而後顯示這個img標籤，用戶就能夠在該位置看到相應的圖片了。

function setImg($obj){    
     var src = $obj.getAttribute("data-src");
     var img = document.createElement("img");
     img.src = src;
     if($obj.children.length == 0){
        //第一次滾動到此位置時加載，以後資源已經下載，不用重複添加
        $obj.appendChild(img);
     }
}
//得到對象距離頁面頂端的距離  
 function getHeight($obj) {  
     var h = $obj.offset().top;
     return h;  
}

window.onscroll = function(){
     var $div = $(".lazyDone");
     for (var i = 0; i < $div.length; i++) {  
        var $odiv = $div[i];  
        //檢查$odiv是否在可視區域  
        var t = document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop);  
        var h = getHegiht($odiv);  
        if (h < t) {  
            setImg($odiv);  
        }  
    }    
};