前端網頁的懶加載

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

 

什么是懶加載？

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

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

• 瀏覽一個網頁，准備往下拖動滾動條
• 拖動一個占位圖片到視窗
• 占位圖片被瞬間替換成最終的圖片

 

為什么使用懶加載而不直接加載？

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

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

 

懶加載圖解

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

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

　　

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

 

 

懶加載的實現

//進頁面直接調用
  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)
  }

　　

pixabayhttps://www.wode007.com/sites/73237.html wallhavenhttps://www.wode007.com/sites/73236.html

懶加載效果預覽

該 demo 添加了 setTimeout 便於直觀的查看懶加載的效果，實際應用的時候不要添加，因為懶加載的作用就是增強用戶體驗的。

結合該 demo 更好的理解之前的圖解

 

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

 

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