Javascript圖片懶加載

graf 發(fā)布于2019-08-29 14:06 / 731人閱讀

摘要：瀏覽器可視區(qū)域的高度即滾動(dòng)條滾動(dòng)的距離。需要手動(dòng)調(diào)用一次方法，在頁面剛的時(shí)候?qū)⒁呀?jīng)在視窗內(nèi)的圖片加載出來。主題是懶加載嘛，后面有空了專門寫一篇函數(shù)節(jié)流方法的文章。

原理

一開始將img標(biāo)簽的src設(shè)置為一張默認(rèn)圖片，將真實(shí)的圖片地址放在data-src上，監(jiān)聽滾動(dòng)事件，當(dāng)圖片進(jìn)入可視區(qū)域時(shí)，寫入src真實(shí)的圖片地址。

如何判斷圖片進(jìn)入了可視區(qū)域？

對(duì)于這樣一個(gè)頁面，圖片即將進(jìn)入頁面的條件是：圖片距離整個(gè)網(wǎng)頁頂部的距離 < 瀏覽器可視區(qū)域的高度 + 滾動(dòng)條滾動(dòng)的距離。那么問題就可以分解成三個(gè)小點(diǎn)：

①圖片距離整個(gè)網(wǎng)頁頂部的距離；

可以通過下面這個(gè)方法獲取某個(gè)元素到網(wǎng)頁頂部的距離：

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

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

  return actualTop;
}

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

②瀏覽器可視區(qū)域的高度；

即window.innerHeight

③滾動(dòng)條滾動(dòng)的距離。

即document.documentElement.scrollTop

懶加載如何實(shí)現(xiàn)？

html代碼如下：




    
    
    
    Document

這里只需要注意到開始時(shí)img標(biāo)簽的src屬性放的是默認(rèn)的圖片，真正的圖片地址放在了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表示在滾動(dòng)條滾動(dòng)時(shí)觸發(fā)調(diào)用lazyLoad方法；

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

需要手動(dòng)調(diào)用一次lazyLoad方法，在頁面剛load的時(shí)候?qū)⒁呀?jīng)在視窗內(nèi)的圖片加載出來。

函數(shù)節(jié)流

所謂的函數(shù)節(jié)流就是當(dāng)事件觸發(fā)的頻率很高時(shí)，并不是每次都需要去調(diào)用相對(duì)應(yīng)的處理函數(shù)，以此來提高性能。比如這里的滾動(dòng)事件，假設(shè)我們希望至少間隔200ms才調(diào)用一次處理函數(shù)，那么可以新增一個(gè)方法

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)。這個(gè)函數(shù)在事件觸發(fā)時(shí)，先去判斷本次觸發(fā)的時(shí)間和上次觸發(fā)的時(shí)間的間隔，如果大于delay，則運(yùn)行處理函數(shù)。

函數(shù)用到了閉包的原理來保存last這個(gè)變量，對(duì)于閉包簡單的解釋一下就是throttle這個(gè)函數(shù)在調(diào)用結(jié)束后，本來應(yīng)該銷毀掉其內(nèi)部的last變量，但是由于返回的是一個(gè)函數(shù)，返回的函數(shù)內(nèi)引用了last這個(gè)變量，因此last被一直保存在了內(nèi)存中。

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