從原始碼偷學技術之圖片預載(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 學到的圖片預載技術說明!

追蹤新知

看完這篇文章了嗎?還意猶未盡的話,追蹤粉絲專頁吧!

我們每天至少分享 1 篇文章/新聞或者實用的軟體/工具,讓你輕鬆增廣見聞提升專業能力!如果你喜歡我們的文章,或是想了解更多特定主題的教學,歡迎到我們的粉絲專頁按讚、留言讓我們知道。你的鼓勵,是我們的原力!

贊助我們的創作

看完這篇文章了嗎? 休息一下,喝杯咖啡吧!

如果你覺得 MyApollo 有讓你獲得實用的資訊,希望能看到更多的技術分享,邀請你贊助我們一杯咖啡,讓我們有更多的動力與精力繼續提供高品質的文章,感謝你的支持!