我在Medium瀏覽帖子的時候發現他們的圖片加載效果真的很贊誒。首先載入一個低像素的模糊圖片，然后逐漸轉變為高清大圖。這個過程體驗真的很好，所以我希望能夠明白他們是使用什么方法做到的。

Medium的技術

我使用WebPageTest測試這個頁面的載入過程。如果你希望能夠測試同樣效果，可以打開Medium的頁面，禁用cache減慢圖片申請加載的過程，所以加載出原圖的時間會稍久。這樣就可以清楚看到整個圖片的加載效果。

具體執行過程

使用div限定好圖片展示的區域，Medium使用<div>標簽并加入padding-bottom樣式設定對應圖片的展示尺寸。通過這樣占位的方式可以防止在圖片加載后出現整體頁面回流的情況。這種方法通常被稱為intrinsic placeholders

加載小尺寸(像素低)的圖片，此時網頁會先請求一個像素質量較低的小號縮略圖（大小為原圖的20%）.這個小圖片使用<img />標簽,因此瀏覽器會在標簽加載完成后，立即請求圖片資源。

只要圖片加載完成，它就會被“畫”到<canvas />中。圖片數據會被main-base.bundle.js文件中自定義的Blur()函數重新計算，可以看到它會產生模糊圖片的效果。盡管有些不同，不過該函數與StackBlur的模糊函數實現效果是相似的。在模糊圖片生成的同時，瀏覽器也會開始請求高清原圖資源。

最后原圖被加載到頁面上，canvas會被隱藏，只展示原圖。

最后的最后，感謝CSS的動畫功能，上述所有轉變過程會很流暢。

Markup

整個展示圖片的結構

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表