解析

懶加載，又稱為延遲加載。
在程序啟動的時候先不加載，在程序運行的時候再去加載需要的資源。

作用

在訪問數據量過大時，減少并發量，降低系統資源的消耗，節省內存空間；
優化網站性能，提高用戶體驗。

原理

圖片懶加載：
h 將所有img標簽的src指向同一張圖，當頁面加載時作為占位圖存在；
h 自定義屬性data-src，用來存儲真實的圖片鏈接；
0 給window綁定scroll事件
1 判斷圖片是否出現在可視區域即需要加載此資源;
2 把src的值替換為data-src開始加載圖片并顯示;
3 添加arrt或class為loaded防止重復加載。

新聞懶加載：
0 給window綁定scroll事件；
1 判斷新聞是否出現在可視區域；
2 用ajax獲得后臺news數據；
3 把數據填充在html標簽里，放在頁面上；

核心

可視區域 scrollTop、offsetTop......
由于 ：
窗口高度 + 垂直滾動距離 = 元素垂直方向距離
所以 ：
窗口高度 + 垂直滾動距離 > 元素垂直方向距離 元素開始出現
垂直滾動距離 > 元素垂直方向距離 元素開始消失
垂直滾動距離 > 元素垂直方向距離 + 元素自身高度 元素消失完畢

------------------------------------判斷可視區域
function isVisible($node) {
  var windowHeight = $(window).height(),       //窗口高度          
      scrollTop = $(window).scrollTop()     //垂直滾動距離  
      offsetTop = $node.offset().top,  //此元素垂直方向距離
      nodeHeight = $node.outerHeight(true); //元素自身高度

 if (windowHeight + scrollTop > offsetTop  &&  offsetTop + nodeHeight  > scrollTop){
         return true }
   return false
 }


------------------------------------每當元素出現在窗口，控制臺輸出true
$(window).on('scroll',function result(){
        if( isVisible($node) ){
            console.log(true);
        }
})


------------------------------------僅當元素第一次出現在窗口，控制臺輸出true
$(window).on('scroll',result);
function result(){
        if($node.not('.show').length === 1 && isVisible($node)){
            console.log(true);
            $node.addClass('.show');
        }
        else if(!isVisible($node)){
        }
    }

應用

demo-圖片懶加載
demo-新聞懶加載

問題

1 一開始是空白？
首先檢查是否在可視范圍，進行加載

2 鼠標滾動，連續多次觸發事件？
添加狀態鎖，本次加載完成前不觸發事件

3 數據獲取一直進行，無法結束？
添加數據鎖，檢測到沒有新數據，不加載并退出