前端網頁的懶加載

昵稱65038308 2020-07-16

展開全文

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

什么是懶加載,？

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

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

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

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

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

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

懶加載圖解

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

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

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

懶加載的實現

//進頁面直接調用
  start()
  // 滾動的時候執(zhí)行加載函數
  $(window).on('scroll',function(){
    start()
  })

  //加載函數
  function start(){
    //not('[data-isLoaded]') 用來過濾已經加載過的,，實現節(jié)流
    $('.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模擬延遲 測試效果用,，實際環(huán)境不要加
    // setTimeout(function(){
      $img.attr('src', $img.attr('data-src'))
    // },500)
     //加載過后就添加 data-isLoaded屬性
      $img.attr('data-isLoaded',1)
  }

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