一開始，都是模糊的，當在螢幕視圖範圍內，就會顯示高清。
一開始載入的是預處理的低像素的圖片，隨後再顯示高清圖片？
或者，是別的什麼方法？
我的理解是 先加載一個小圖，然後用 css3 濾鏡模糊一下，然後懶加載，大圖加載完成後替換一下 src .
具體可以參考這篇文章 http://www.jackpu.com/medium-...
filter: blur(10px), 載入完成 filter: blur(0)
知乎是跟 Medium 一樣用 canvas 來模糊小圖的，大圖加載完了就去掉。好處是可以控制模糊的演算法，缺點就是比較重。
我這裡是利用了瀏覽器預設模糊小圖的方式來過渡，https://blog.crimx.com/2016/1...，好處是比較輕，相容性也不錯，但小圖得事先模糊才能有比較好的效果。不考慮相容性也可以用 CSS 模糊。
原理上面都說的差不多。這裡我也做成了一個vue的組件，還將就能自己用vue-img-loader
我的理解是 先加載一個小圖，然後用 css3 濾鏡模糊一下，然後懶加載，大圖加載完成後替換一下 src .
具體可以參考這篇文章 http://www.jackpu.com/medium-...
filter: blur(10px), 載入完成 filter: blur(0)
知乎是跟 Medium 一樣用 canvas 來模糊小圖的，大圖加載完了就去掉。好處是可以控制模糊的演算法，缺點就是比較重。
我這裡是利用了瀏覽器預設模糊小圖的方式來過渡，https://blog.crimx.com/2016/1...，好處是比較輕，相容性也不錯，但小圖得事先模糊才能有比較好的效果。不考慮相容性也可以用 CSS 模糊。
原理上面都說的差不多。這裡我也做成了一個vue的組件，還將就能自己用
vue-img-loader