Javascript圖片懶加載

qc1iu 發布于2019-08-01 18:16 / 2970人閱讀

摘要：瀏覽器可視區域的高度即滾動條滾動的距離。需要手動調用一次方法，在頁面剛的時候將已經在視窗內的圖片加載出來。主題是懶加載嘛，后面有空了專門寫一篇函數節流方法的文章。

原理

一開始將img標簽的src設置為一張默認圖片，將真實的圖片地址放在data-src上，監聽滾動事件，當圖片進入可視區域時，寫入src真實的圖片地址。

如何判斷圖片進入了可視區域？

對于這樣一個頁面，圖片即將進入頁面的條件是：圖片距離整個網頁頂部的距離 < 瀏覽器可視區域的高度 + 滾動條滾動的距離。那么問題就可以分解成三個小點：

①圖片距離整個網頁頂部的距離；

可以通過下面這個方法獲取某個元素到網頁頂部的距離：

function getElementTop (element) {
  let actualTop = element.offsetTop;
  let parent = element.offsetParent;

  while (parent !== null) {
    actualTop += parent.offsetTop;
    parent = parent.offsetParent;
  }

  return actualTop;
}

代碼分析：
offsetTop表示的是元素距離父元素左上角頂點的高度，offsetParent則表示元素的父元素。通過不斷遍歷累加高度，就可以得到元素距離網頁頂部的距離。

②瀏覽器可視區域的高度；

即window.innerHeight

③滾動條滾動的距離。

即document.documentElement.scrollTop

懶加載如何實現？

html代碼如下：




    
    
    
    Document

這里只需要注意到開始時img標簽的src屬性放的是默認的圖片，真正的圖片地址放在了data-src中

css代碼如下：

.wrapper {
    text-align: center;
}

img {
    display: block;
    margin: 10px auto;
}

js代碼如下：

function lazyLoad () {
  let images = document.querySelectorAll("img");
  for(let i = 0; i < images.length; i++) {
    let image = images[i];
    if (getElementTop(image) <= window.innerHeight + document.documentElement.scrollTop) {
      image.src = image.getAttribute("data-src");
    }
  }
}

function getElementTop (element) {
  let actualTop = element.offsetTop;
  let parent = element.offsetParent;

  while (parent !== null) {
    actualTop += parent.offsetTop;
    parent = parent.offsetParent;
  }

  return actualTop;
}

lazyLoad()；

window.onscroll =lazyLoad；

代碼分析：
window.onscroll = lazyload表示在滾動條滾動時觸發調用lazyLoad方法；

在lazyLoad方法中，先通過document.querySelectorAll("img");找到所有的Image（這里只是為了簡化示例，實際場景中可以通過在需要懶加載的圖片上添加統一的類名，然后通過querySelectorAll(".類名")來獲取需要懶加載的圖片),依次判斷是否進入了可視區域內。如果進入了可視區域則做img標簽的src的替換。

需要手動調用一次lazyLoad方法，在頁面剛load的時候將已經在視窗內的圖片加載出來。

函數節流

所謂的函數節流就是當事件觸發的頻率很高時，并不是每次都需要去調用相對應的處理函數，以此來提高性能。比如這里的滾動事件，假設我們希望至少間隔200ms才調用一次處理函數，那么可以新增一個方法

function throttle (delay, action) {
  let last = 0;
  return function () {
    let now = new Date();
    if (now - last > delay) {
      action();
      last = now;
    }
  }
}

然后將window.onscroll =lazyLoad；改成window.onscroll = throttle(200, lazyLoad)。這個函數在事件觸發時，先去判斷本次觸發的時間和上次觸發的時間的間隔，如果大于delay，則運行處理函數。

函數用到了閉包的原理來保存last這個變量，對于閉包簡單的解釋一下就是throttle這個函數在調用結束后，本來應該銷毀掉其內部的last變量，但是由于返回的是一個函數，返回的函數內引用了last這個變量，因此last被一直保存在了內存中。

throttle這個方法還有很多可以優化的地方，不在這里展開了。主題是懶加載嘛，后面有空了專門寫一篇函數節流方法的文章。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51622.html

圖片的預加載和懶加載

摘要：圖片的預加載是提升用戶體驗而損失性能的一種做法，而懶加載的性能就比較好了，所以將兩個結合起來放到程序中是一種不錯的選擇。最近在做H5滑頁時，遇到一些比較大的場景，動輒二十、三十頁，而圖片更是可恨的能達到上百個，所以就會導致場景在加載的時候遇到網速比較慢的時候，用戶等待的時間特別長，這樣的話，就有可能導致一部分的用戶沒有耐心，而丟失這部分用戶，于是就有了這里的圖片的預加載和懶加載，記個...

SwordFly 2019-08-21 10:37 評論0 收藏0
Javascript圖片懶加載

摘要：瀏覽器可視區域的高度即滾動條滾動的距離。需要手動調用一次方法，在頁面剛的時候將已經在視窗內的圖片加載出來。主題是懶加載嘛，后面有空了專門寫一篇函數節流方法的文章。原理一開始將img標簽的src設置為一張默認圖片，將真實的圖片地址放在data-src上，監聽滾動事件，當圖片進入可視區域時，寫入src真實的圖片地址。如何判斷圖片進入了可視區域？ showImg(https://seg...

graf 2019-08-29 14:06 評論0 收藏0
Javascript圖片懶加載

摘要：瀏覽器可視區域的高度即滾動條滾動的距離。需要手動調用一次方法，在頁面剛的時候將已經在視窗內的圖片加載出來。主題是懶加載嘛，后面有空了專門寫一篇函數節流方法的文章。原理一開始將img標簽的src設置為一張默認圖片，將真實的圖片地址放在data-src上，監聽滾動事件，當圖片進入可視區域時，寫入src真實的圖片地址。如何判斷圖片進入了可視區域？ showImg(https://seg...

Jason_Geng 2019-08-21 18:23 評論0 收藏0
實現一個圖片懶加載插件有多難？

摘要：一個簡單的圖片懶加載共涉及兩個方面，約定我們首先需要給準備實施懶加載的元素添加指定的這里為同時將賦值給屬性。源碼地址插件完整版地址 m-lazyhttps://github.com/zhanyouwei... 歡迎一起交流歡迎關注我的個人公眾號，不定期更新自己的工作心得。showImg(https://segmentfault.com/img/bVEk23?w=258&h=258...

darkbug 2019-08-19 17:55 評論0 收藏0