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

FOLLOW US

對抗久坐職業傷害

研究指出每天增加 2 小時坐著的時間,會增加大腸癌、心臟疾病、肺癌的風險,也造成肩頸、腰背疼痛等常見問題。

然而對抗這些問題,卻只需要工作時定期休息跟伸展身體即可!

你想輕鬆改變現狀嗎?試試看我們的 PomodoRoll 番茄鐘吧! PomodoRoll 番茄鐘會根據你所設定的專注時間,定期建議你 1 項辦公族適用的伸展運動,幫助你打敗久坐所帶來的傷害!

贊助我們的創作

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

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