懶載入

evenyao發表於2018-08-22

作為網頁內容的一部分，影像和視訊通常要消耗很多資源載入。要提高網頁應用的效能，如何避免資源浪費在載入影像和視訊上就很重要了。但是，很多時候我們都不願意減少網頁上的媒體資源，所以我們經常無從下手。幸運的是，我們有懶載入這個絕招，它可以幫助我們減少載入時間和降低負載，而不在內容上偷工減料。

認識懶載入

什麼是懶載入？

懶載入是一種在頁面載入時延遲載入一些非關鍵資源的技術，換句話說就是按需載入。

我們之前看到的懶載入一般是這樣的形式：

瀏覽一個網頁，準備往下拖動滾動條
拖動一個佔點陣圖片到視窗
佔點陣圖片被瞬間替換成最終的圖片

為什麼使用懶載入而不直接載入？

浪費流量。在不計流量收費的網路，這可能不重要；在按流量收費的網路中，毫無疑問，一次性載入大量圖片就是在浪費使用者的錢。
消耗額外的電量和其他的系統資源，並且延長了瀏覽器解析的時間。因為媒體資源在被下載完成後，瀏覽器必須對它進行解碼，然後渲染在視窗上，這些操作都需要一定的時間。

懶載入圖片和視訊，可以減少頁面載入的時間、頁面的大小和降低系統資源的佔用，這些對於效能都有顯著地提升。總體來講，就是改善使用者體驗，增強頁面效能。

圖解

通過下圖所示（綠色為頁面範圍，紅色為視窗範圍，藍色為待顯示元素）。 $(window).scrollTop() 為頁面頂部到視窗頂部的高度。 $(window).height() 為視窗的高度。$node.offset().top 為頁面頂部到待顯示元素的高度。即我們可以知道如何判斷一個元素，是否進入使用者視野範圍內，即

$node.offset().top <= $(window).height() + $(window).scrollTop()

條件滿足的時候，這個元素就進入了我們的視野。

進入視野與抵達底部

如何判斷元素出現在使用者視野？
$(window).scrollTop()為頁面頂部到視窗頂部的高度。$(window).height()為視窗的高度。$node.offset().top 為頁面頂部到待顯示元素的高度。即我們可以知道如何判斷一個元素，是否進入使用者視野範圍內，即
$(window).height() + $(window).scrollTop() >= $node.offset().top 條件滿足的時候，這個元素就進入了我們的視野。（上圖已經分析過）

如何判斷瀏覽器滾動到最底部？
$(window).scrollTop()為頁面頂部到視窗頂部的高度。$(window).height()為視窗的高度。$(`body`).height() 為頁面整個文件的高度。即我們可以知道如何判斷瀏覽器是否滾動到最底部，即$(window).height() + $(window).scrollTop() >= $(`body`).height() 條件滿足的時候，瀏覽器滾動到最底部。

懶載入的實現

  //進頁面直接呼叫
  start()
  // 滾動的時候執行載入函式
  $(window).on(`scroll`,function(){
    start()
  })

  //載入函式
  function start(){
    //not(`[data-isLoaded]`) 用來過濾已經載入過的，實現節流
    $(`.container img`).not(`[data-isLoaded]`).each(function(){
      if( isShow($(this)) ){
        loadImg($(this))
      }
    })
  }

  // 判斷是否進入視野的函式
  function isShow($node){
    return $node.offset().top <= $(window).height() + $(window).scrollTop()
  }

  // 格式化圖片載入地址函式
  function loadImg($img){
    //setTimeout模擬延遲 測試效果用，實際環境不要加
    // setTimeout(function(){
      $img.attr(`src`, $img.attr(`data-src`))
    // },500)
     //載入過後就新增 data-isLoaded屬性
      $img.attr(`data-isLoaded`,1)
  }