目錄

• 背景
• 說明
• 實現(xiàn)原理
• 1. placeholder 的實現(xiàn)很細(xì)致和靈活
• 2. 添加圖片緩存
• 3. 事件監(jiān)聽使用節(jié)流
• 4. 監(jiān)聽事件不止?jié)L動事件
• 5. 事件列隊的方式來處理懶加載
• 6. 支持 data-srcset
• 7. 自定義控制可視區(qū)的判定范圍
• 待完善
• 1. 沒有解決布局抖動
• 2. 跳過已經(jīng)加載圖片的判斷方式
• 3. 局部懶加載
• 4. 性能不是很好
• 5. observer 模式配置簡單
• 6. SEO 不友好
• 總結(jié)

背景

上篇《圖片懶加載原理方案詳解》中詳細(xì)解析了圖片懶加載的原理和方案。主流方案有兩個：

• 監(jiān)聽頁面的滾動事件判斷圖片元素的 top 是否在頁面可視區(qū)內(nèi)。
• 通過 IntersectionObserver 監(jiān)聽元素是否進(jìn)去可視區(qū)域內(nèi)。

實現(xiàn)過程中注意優(yōu)化的點：

• 避免重復(fù)設(shè)置 src。
• 滾動事件監(jiān)聽添加節(jié)流。
• 加載圖片的時間點可以適當(dāng)提前。
• 避免出現(xiàn)布局抖動。
• 響應(yīng)式圖片要額外處理。
• seo 不友好的問題。

本文將通過vue-lazyload總結(jié)和學(xué)習(xí)圖片懶加載其他優(yōu)化細(xì)節(jié)。

說明

實現(xiàn)原理

vue-lazyload 兩個方案都采用了，通過 observer 配置屬性來切換方案，getBoundingClientRect 方式的實現(xiàn)很細(xì)節(jié)而 IntersectionObserver 的實現(xiàn)相對比較簡單。

1. placeholder 的實現(xiàn)很細(xì)致和靈活

placeholder 是圖片加載之前的為了保證用戶體驗而設(shè)置的一個默認(rèn)圖片，提示用戶圖片正在加載。vue-lazyload 將 placeholder 拆分為加載中顯示的圖片 loading 和加載圖片出錯顯示的圖片 error，并且現(xiàn)在JavaScript 中創(chuàng)建 Image 對象把要加載的圖片下載下來后再修改 img 標(biāo)簽的 src 屬性，這樣能避免直接修改 src 下載圖片的過程中頁面 img 標(biāo)簽顯示空白的情況。

this.renderLoading(() => {
    this.attempt++;
    this.options.adapter["beforeLoad"] &&
this.options.adapter["beforeLoad"](this, this.options);
    this.record("loadStart");
    loadImageAsync(
{
    src: this.src,
    cors: this.cors,
},
(data) => {
    this.naturalHeight = data.naturalHeight;
    this.naturalWidth = data.naturalWidth;
    this.state.loaded = true;
    this.state.error = false;
    this.record("loadEnd");
    this.render("loaded", false);
    this.state.rendered = true;
    this._imageCache.add(this.src);
    onFinish();
},
(err) => {
    !this.options.silent && console.error(err);
    this.state.error = true;
    this.state.loaded = false;
    this.render("error", false);
}
    );
});

這是加載的主要代碼，renderLoading 函數(shù)是加載 loading 圖片。

  /*
   * render loading first
   * @params cb:Function
   * @return
   */
  renderLoading (cb) {
    this.state.loading = true
    loadImageAsync({
      src: this.loading,
      cors: this.cors
    }, data => {
      this.render("loading", false)
      this.state.loading = false
      cb()
    }, () => {
      // handler `loading image` load failed
      cb()
      this.state.loading = false
      if (!this.options.silent) console.warn(`VueLazyload log: load failed with loading image(${this.loading})`)
    })
  }

loadImageAsync 函數(shù)是創(chuàng)建 Image 對象加載對應(yīng)的圖片，render 方法是將 img 標(biāo)簽設(shè)置 src。

const loadImageAsync = (item, resolve, reject) => {
    let image = new Image();
    if (!item || !item.src) {
const err = new Error("image src is required");
return reject(err);
    }
    image.src = item.src;
    if (item.cors) {
image.crossOrigin = item.cors;
    }
    image.onload = function () {
resolve({
    naturalHeight: image.naturalHeight,
    naturalWidth: image.naturalWidth,
    src: image.src,
});
    };
    image.onerror = function (e) {
reject(e);
    };
};

   /**
 * set element attribute with image"url and state
 * @param  {object} lazyload listener object
 * @param  {string} state will be rendered
 * @param  {bool} inCache  is rendered from cache
 * @return
 */
    _elRenderer (listener, state, cache) {
      if (!listener.el) return
      const { el, bindType } = listener
      let src
      switch (state) {
case "loading":
  src = listener.loading
  break
case "error":
  src = listener.error
  break
default:
  src = listener.src
  break
      }
      if (bindType) {
el.style[bindType] = "url("" + src + "")"
      } else if (el.getAttribute("src") !== src) {
el.setAttribute("src", src)
      }
      el.setAttribute("lazy", state)
      this.$emit(state, listener, cache)
      this.options.adapter[state] &&
this.options.adapter[state](listener, this.options)
      if (this.options.dispatchEvent) {
const event = new CustomEvent(state, {
  detail: listener
})
el.dispatchEvent(event)
      }
    }

2. 添加圖片緩存

聲明 _imageCache 記錄加載過的圖片，圖片已經(jīng)緩存到了瀏覽器很快就能顯示出來，就不用創(chuàng)建 Image 對象來加載圖片。

if (this._imageCache.has(this.src)) {
    this.state.loaded = true;
    this.render("loaded", true);
    this.state.rendered = true;
    return onFinish();
}

但如果使用過程中用戶清空瀏覽器圖片緩存，_imageCache 仍有記錄就會出現(xiàn) img 元素加載圖片時顯示空白。

3. 事件監(jiān)聽使用節(jié)流

vue-lazyload 使用的節(jié)流不是平時常用的節(jié)流，而是防抖和節(jié)流相結(jié)合，節(jié)流頻率變化的方式。

function throttle(action, delay) {
    let timeout = null;
    let movement = null;
    let lastRun = 0;
    let needRun = false;
    return function () {
needRun = true;
if (timeout) {
    return;
}
let elapsed = Date.now() - lastRun;
let context = this;
let args = arguments;
let runCallback = function () {
    lastRun = Date.now();
    timeout = false;
    action.apply(context, args);
};
if (elapsed >= delay) {
    runCallback();
} else {
    timeout = setTimeout(runCallback, delay);
}
if (needRun) {
    clearTimeout(movement);
    movement = setTimeout(runCallback, 2 * delay);
}
    };
}

delay 默認(rèn)是 200ms，throttle 返回的函數(shù)第一次執(zhí)行會馬上執(zhí)行 action，第二次執(zhí)行如果在 200ms 內(nèi)就會推遲 200ms 執(zhí)行中途不再執(zhí)行 action，而如果在 200ms 間隔以外就馬上執(zhí)行 action。最后超過 400ms 后再最后執(zhí)行一次，這種寫法很少見。

4. 監(jiān)聽事件不止?jié)L動事件

vue-lazyload 除了監(jiān)聽 scroll 事件還默認(rèn)監(jiān)聽了，還監(jiān)聽了 wheel、mousewheel、resize、animationend、transitionend、touchmove。

• 監(jiān)聽 wheel、mousewheel 事件是因為在自定義滾動條下需要監(jiān)聽滾輪事件。
• 監(jiān)聽 resize、animationend、transitionend 事件是因為頁面大小可能會改變導(dǎo)致可視區(qū)域的范圍改變而需要重新計算判斷元素是否在可視區(qū)域內(nèi)。
• touchmove 是在手機(jī)端下需要監(jiān)聽的事件。

監(jiān)聽事件考慮的很細(xì)，但默認(rèn)監(jiān)聽這么多事件會導(dǎo)致性能的消耗，根據(jù)條件判斷來加對應(yīng)的監(jiān)聽事件會更好些。

5. 事件列隊的方式來處理懶加載

每個需要懶加載的元素都會生成一個 ReactiveListener 對象放到 ListenerQueue 隊列中，ReactiveListener 對象包含判斷元素是否在可視區(qū)域，加載圖片等系列操作。觸發(fā)滾動事件時會遍歷 ListenerQueue 隊列中每一個 ReactiveListener 對象是否需要加載圖片。

這種方式代碼結(jié)構(gòu)清晰職責(zé)分明，擴(kuò)展性好。添加一個懶加載元素只需在隊列中添加一個對象。缺點是元素的 dom 對象一直存在隊列中沒有釋放，只有組件銷毀才能會釋放。在懶加載圖片很多的情況下性能不是很好。

6. 支持 data-srcset

HTMLImageElement 的 srcset 的值是一個字符串，用來定義一個或多個圖像候選地址，以 , 分割，每個候選地址將在特定條件下得以使用。候選地址包含圖片 URL 和一個可選的寬度描述符和像素密度描述符，該候選地址用來在特定條件下替代原始地址成為 src(en-US) 的屬性。 ——MDN

srcset 的作用是可以根據(jù)頁面的寬度來加載不同的圖片。 vue-lazyload 不是簡單的把 data-srcset 賦值給 img 的 srcset 屬性，而是用 JavaScript 代碼來實現(xiàn) srcset 的效果。之所以用 JavaScript 代碼來實現(xiàn)是為了圖片加載中能更精細(xì)的控制 loading 和 error 的圖片顯示。

function getBestSelectionFromSrcset(el, scale) {
    if (el.tagName !== "IMG" || !el.getAttribute("data-srcset")) return;
    let options = el.getAttribute("data-srcset");
    const result = [];
    const container = el.parentNode;
    const containerWidth = container.offsetWidth * scale;
    let spaceIndex;
    let tmpSrc;
    let tmpWidth;
    options = options.trim().split(",");
    options.map((item) => {
item = item.trim();
spaceIndex = item.lastIndexOf(" ");
if (spaceIndex === -1) {
    tmpSrc = item;
    tmpWidth = 999998;
} else {
    tmpSrc = item.substr(0, spaceIndex);
    tmpWidth = parseInt(
item.substr(spaceIndex + 1, item.length - spaceIndex - 2),
10
    );
}
result.push([tmpWidth, tmpSrc]);
    });
    result.sort(function (a, b) {
if (a[0] < b[0]) {
    return 1;
}
if (a[0] > b[0]) {
    return -1;
}
if (a[0] === b[0]) {
    if (b[1].indexOf(".webp", b[1].length - 5) !== -1) {
return 1;
    }
    if (a[1].indexOf(".webp", a[1].length - 5) !== -1) {
return -1;
    }
}
return 0;
    });
    let bestSelectedSrc = "";
    let tmpOption;
    for (let i = 0; i < result.length; i++) {
tmpOption = result[i];
bestSelectedSrc = tmpOption[1];
const next = result[i + 1];
if (next && next[0] < containerWidth) {
    bestSelectedSrc = tmpOption[1];
    break;
} else if (!next) {
    bestSelectedSrc = tmpOption[1];
    break;
}
    }
    return bestSelectedSrc;
}

7. 自定義控制可視區(qū)的判定范圍

在計算 img 元素是否在可視區(qū)域內(nèi)時，通過 preLoad 來設(shè)置判定區(qū)的大小。

  /*
   *  check el is in view
   * @return {Boolean} el is in view
   */
  checkInView () {
    this.getRect()
    return (this.rect.top < window.innerHeight * this.options.preLoad && this.rect.bottom > this.options.preLoadTop) &&
    (this.rect.left < window.innerWidth * this.options.preLoad && this.rect.right > 0)
  }

待完善

1. 沒有解決布局抖動

庫中沒有 css 的封裝，可能作者的開發(fā)初衷就是不想封裝 css，讓使用者自己處理 css，相關(guān)布局抖動的描述可以去看《圖片懶加載原理方案詳解》。

2. 跳過已經(jīng)加載圖片的判斷方式

源碼中是通過 rendered 和 loaded 來判斷圖片是否已經(jīng)加載過，并沒有在 ListenerQueue 隊列中銷毀已經(jīng)加載過的事件對象。

3. 局部懶加載

沒有考慮頁面局部滾動條內(nèi)圖片的懶加載情況。

4. 性能不是很好

性能方面消耗包括綁定比較多頻繁觸發(fā)的事件，ListenerQueue 隊列中的事件沒有做對應(yīng)的銷毀，圖片比較多情況下 ListenerQueue 隊列中的事件堆積比較多。

5. observer 模式配置簡單

observer 模式模式下 IntersectionObserver 初始化代碼。

   /**
    * init IntersectionObserver
    * set mode to observer
    * @return
    */
    _initIntersectionObserver () {
      if (!hasIntersectionObserver) return
      this._observer = new IntersectionObserver(this._observerHandler.bind(this), this.options.observerOptions)
      if (this.ListenerQueue.length) {
this.ListenerQueue.forEach(listener => {
  this._observer.observe(listener.el)
})
      }
    }

IntersectionObserver 的配置通過 options 中的 observerOptions 直接配置，相比 event 模式的配置過于簡單，沒有對 IntersectionObserver api 一些常用的功能進(jìn)行封裝，比如自定義可視區(qū)域的判斷范圍，需要查找 IntersectionObserver api 中的配置項 rootMargin 才能實現(xiàn)。如果 observer 模式下的 也加個一個 preLoad 配置，就不用額外再去找 IntersectionObserver api 文檔。

6. SEO 不友好

開始 img 的 src 是值是空的，后面加載的時候才設(shè)置 src，搜索引擎就抓取不到圖片。

總結(jié)

vue-lazyload 在用戶體驗上處理的很細(xì)節(jié)，從配置項中有個 attempt 圖片加載失敗次數(shù)上看出考慮的很細(xì)膩，但在大量圖片懶加載時性能會差點，IntersectionObserver 的封裝有點匆忙。

以上就是JS圖片懶加載庫VueLazyLoad詳解的詳細(xì)內(nèi)容，更多關(guān)于JS VueLazyLoad庫的資料請關(guān)注其它相關(guān)文章！