新版知乎載入圖片時從模糊到清晰的這個效果是如何做出來的？

01-14

如圖。
當瀏覽一個多圖回答的時候有時候會看到模糊的圖片變清晰的過程。
這個效果是如何實現的？
是1.本來就已經載入到清晰的圖片只不過先設置模糊然後延時變清晰;

還是2.當頁面首先載入的時候先載入模糊的緩存然後等得到清晰的圖片請求後再替換的;
如果是第二種，那豈不是要專門存儲緩存圖片，浪費資源？

謝邀。

是你說的第二種，CDN一般可以做到壓縮圖片。

閑著無聊，臭表臉用自己主頁用chrome抓了下，見如下三張圖：

1. 載入一個較小的圖片。他們大約會請求一張縮略的jpg圖，實際上這是直接在代碼中寫了 img標籤的，瀏覽器會正常請求；

2. 一旦圖片載入了，它們會開始繪製一個canvas標籤，圖片的數據會傳遞給自定義的blur函數，這個函數與StackBlur有點相似，但不完全，設置opacity動畫效果，這個同時，網路開始請求大圖。

3. 大圖載入完畢後，於是區域便展示大圖，而canvas則會隱藏掉。這幾個過程可以通過transition從而讓整個效果變得更加流暢。

知乎學的Medium的圖片載入方案，具體可以看如下這個我fork的 Codepen：Reproducing Medium loading image effect

同時可以參考這篇文章：How Medium does progressive image loading以上，謝謝。

有一種JPEG，叫做漸進式JPEG：使用漸進式 JPEG 來提升用戶體驗 - 文章 - 伯樂在線

不過知乎的方案更複雜啦，參見樓上

請向quora學習，預先載入一些。現在圖片都是滑鼠滾到再載入，每次都先看見個模糊的，用戶體驗極其糟糕。

跑個題

個人體驗不好，還不如放個載入的圖片

知乎用的是低清圖+模糊，進入viewport一段時間後再載入大圖。

估計能省一些cdn流量，但很多圖片是外鏈，知乎還得自己壓一遍並且提供低清版本，感覺不一定省錢？

這些方法更耗瀏覽器，用戶的筆記本電池會受一點影響。

然後關鍵是體驗很糟糕啊，每次看見圖片都得停在那裡等幾秒才行，都不知道那圖片有用沒用，還不能提前載入。

我覺得挺好看的呀，不錯，回頭自己搞一哈

用戶體驗太差了，每次載入都比瀏覽速度慢。搞得我都得向下拉好多，然後讓圖片慢慢載入，再從頭看

但是我覺得這樣做並不好，每次在電腦端看圖文消息，都容易被嚇一跳。

真的是看的無比的心煩

載入個圖片而已

真的搞不懂

煩

百度貼吧以前好像也是這樣載入的

如果網路慢，其實就有點像無圖模式，往往我滾動條拉下去了，圖片還沒載入出來，如果想看還是得滾回去，等待載入，要麼就直接跳過不看圖片。。。

我是記得以前在網上看過，在PS上面導出圖片文件的時候，勾選哪個選項（真忘了）……也能實現這樣的效果……