像Medium的漸近式圖片加載

medium 漸進式圖片

English version:Progressive Image Loading like Medium

圖片延遲載入的3種方式

第一次知道有Medium這平台是上一份工作的時候,應該是3年前。當時看到他們文章內圖片加載是從霧到清晰的這個效果,有驚為天人的感覺。

當時只覺得這技術很厲害,因為那時對js不熟,所以認為一定是什麼高科技技術。

最近在找資料時很常找到Medium上有人寫的文章,才又想起了這功能。

3年後,我發現自己大概知道可以怎麼寫了,在一陣搜尋後看到了這篇:

Page Load Optimization by Progressive Image Loading (like Medium)

裡面說到圖片延遲載入有3種方式:

  1. 常見的lazyload,就是滑到某個區塊後,那個區塊的圖片才開始載入。
  2. 像Medium的這種,其實跟lazyload很像,不一樣的是會先用一個佔位圖片放著,讓使用者以為圖片是慢慢讀取進來。
  3. Facebook的那種,不過文章中沒說明FB是怎麼用的。

更驚人的是,文章中測試了一下lazyload跟medium這兩個方式,medium的這種讀取速度更快。

看到這個比較,就想來寫一套自己可以用的圖片延遲載入。


Medium漸進式載入的3個步驟

文章中作者也有提供他們的寫法,不過最近手上一個案子剛好有用背景圖去處理不同尺寸圖片的問題,就想用自己的方式去寫一個。

Medium的這種漸近式讀圖,看上去很複雜,但看完文章後再思考一下,其很簡單,就三個步驟:

放個廣告賺點養主機的$$,謝謝

  1. 將原圖另外存一份寬度縮小到10px,品質降成10%的小小圖,然後整個拉大撐滿原本要放圖片的地方,這種小小圖的大小不到1kb。如果再狠一點,這個小小圖直接改放base64,可以減少請求。
  2. 寫一段監聽滾動時的事件,當頁面捲動到圖片的區塊,就執行讀取原圖的功能,這邊直接使用套件「waypoints」。
  3. 原圖讀完後,先把透明度調成0,塞進有背景圖的區塊裡,因為區塊大小一開始就跟圖大小一樣,因此圖放上去後就會塞滿區塊。圖片放進去後,等個50毫秒就加入把透明度調回為1的class,圖片就會有淡入效果。

以上就是思考過程,以下開始進入程式碼。


Medium漸進式載入,實作程式碼部份

縮小圖的部份,用photoshop來處理。

背景圖撐滿div,還可以等比例縮放,這邊用的是一個css的特性:

Vertical padding is relative to element’s width not height.

簡單來說,就是padding-top、padding-bottom這兩個值如果用的單位是百分比(%),那它參考的是這個div的寬而不是高。

bootstrap的Responsive embed就是用這個特性去寫的。

以下是圖片區塊div的html:

以下是我對背景圖撐滿div的sass寫法:

因為background-image直接寫進html裡了,所以css就處理size跟position這兩個即可。

要特別注意的是height要設成0。

16:9、4:3的比例,是(16/9) * 100來計算的,如果有圖片比例不是這兩種的情形,就改用js去抓寬高後在丟進公式裡去計算就行。

接著是重要的js了,直接引用了jQuery,寫法上也用es6,如下:

第一步是先處理圖片不是16:9或4:3的狀況,會需要後端大大丟圖時一併丟圖的寬高,js才能抓值去計算padding-bottom的百分比。

第二步就是用了 waypoints 這個套件,去監聽各個圖片區塊進入畫面了沒。

為了防止圖片區塊每一次滑動到都會執行功能,在最後要加上destory()把他取消掉。

第三步就是建立一個圖片物件,然後append進div中了。

原始檔放在Github上:

https://github.com/letswritetw/letswrite-medium-lazyload


實測頁面讀取時間

實際把頁面用pindom去測試後,頁面讀取時間真的加快了。

下面這張是一般直接讀取圖片的數據,4.57秒:

不做處理,直接讀取圖片
不做處理,直接讀取圖片

下面這張是用了延遲載入後的數據,降到2.02秒:

加了延遲載入的功能後
加了延遲載入的功能後

後來把功能demo給了後端看,問說需不需要,得到的回應是,似乎大部份直接用lazyload就可以有效減少頁面讀取時間了,所以需求性沒很高。

覺得像Medium這種功能是對整體使用者經驗有特別要求的案子才會用到。

不過,也算是圓了3年前的夢,至少現在的我是有能力寫出來的。

頁面demo:像Medium的漸近式圖片加載


Summary
像Medium的漸近式圖片加載
Article Name
像Medium的漸近式圖片加載
Description
本篇大綱:圖片延遲載入的3種方式、Medium漸進式載入的3個步驟、Medium漸進式載入,實作程式碼部份、實測頁面讀取時間。實際把頁面用pindom去測試後,頁面讀取時間真的加快了。下面這張是一般直接讀取圖片的數據,4.57秒,下面這張是用了延遲載入後的數據,降到2.02秒。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg
訂閱
通知
guest
2 Comments
最舊
最新
Inline Feedbacks
看所有留言
otis
otis
10 月 之前

請問那個可以測量圖片速度的網站是哪個?