從原始碼偷學技術之圖片預載(preload)

Lightbox 是很知名的網頁圖片 viewer, 很多網站顯示圖片都會使用 Lightbox 以滿足使用者想放大圖片的需求。

p.s. 你在瀏覽網頁時，如果點一下圖片，那張圖片就會置中放大的話，那效果通常是由 Lightbox 做出來的，如果有多張圖片的話，可以按左右方向鍵切換圖片

Lightbox 也將程式碼開放出來回饋大家，它的運作原理很簡單，在網頁載入完成之後，把 Lightbox 的 DOM append 到 body 底下，接著開始掃有含 lightbox 自訂屬性的 a, area HTML nodes, 再把 click event 寫進這些 nodes 之中，所以點到這些元素，就會觸發 Lighbox 顯示使用者點的圖片，並且用很高的 z-index 設定蓋住整個網頁，再搭配一些動畫效果，整體感覺起來就十分高端。

但是有一段程式碼引起我的注意， Lightbox 為了讓圖片切換時很順暢，不要切過去才讓使用者發現圖片還在加載，所以使用預載(preload)技術，作法很簡單，建立一個 Image 元素，並且設定好它的 src 屬性，瀏覽器就會自動加載：

const img = new Image();
img.src = '...';

Lightbox 的原始碼如下，簡單說明就是點圖片時，偷偷預載上一張跟下一張圖片：

  // Preload previous and next images in set.
  Lightbox.prototype.preloadNeighboringImages = function() {
    if (this.album.length > this.currentImageIndex + 1) {
      var preloadNext = new Image();
      preloadNext.src = this.album[this.currentImageIndex + 1].link;
    }
    if (this.currentImageIndex > 0) {
      var preloadPrev = new Image();
      preloadPrev.src = this.album[this.currentImageIndex - 1].link;
    }
  };

以上就是從 Lightbox 學到的圖片預載技術說明！