網頁如何做到體驗很好的圖片載入

你有沒有想過相簿相關的 Web 服務如何同時載入那麼多張圖,但又不會讓體驗感覺很糟糕?

當一個網頁很多張圖時,最常見的情況是會因為圖還在下載的情況,導致某些畫面還在渲染,讓網站感覺很慢似的。

這時候有幾種做法:

  1. 為圖片加上 lazy loading

例如:

<img src="image.jpg" alt="..." loading="lazy" />

img 標籤的 loading="lazy" 屬性會讓瀏覽器優先載入螢幕可顯示的區域,其他超出區域的圖片就會延遲載入,直到使用者滑到接近的區域時,才開始載入。

這個方法真的很簡單,只是 loading 屬性 Safari 還未支援,如果客戶有用 Safari 的話,就得自己實作 lazy loading 。

不過 lazy loading 還是無法解決圖檔太大時,下載需要時間的問題,使用者還是會看到空白區域⋯⋯。

這時需要:

  1. 除了壓縮圖檔之外,還可以用 1 個經過高斯模糊的影像當圖片背景,由於這個背景經過處理,所以 image size 會非常小,使用者可以很快看到畫面中有模糊的區域,讓使用者可以意識到圖片正在處理中,接著等到真正的圖片下載完成之後,真正的圖片就會蓋掉模糊的背景(此時也可以用 js 把模糊背景去除)

這就是體驗較好的圖片載入流程介紹,想知道詳細的話可以看留言的 YT 影片,時間約 15 分鐘,但是講解得很清楚!

How to Load Images Like a Pro

FOLLOW US

對抗久坐職業傷害

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

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

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

贊助我們的創作

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

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