亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

javascript - 知乎上的圖片載入是什麼原理?
我想大聲告訴你
我想大聲告訴你 2017-05-24 11:32:17
0
4
839

一開始,都是模糊的,當(dāng)在螢?zāi)灰晥D範(fàn)圍內(nèi),就會顯示高清。

一開始載入的是預(yù)處理的低像素的圖片,隨後再顯示高清圖片?

或者,是別的什麼方法?

我想大聲告訴你
我想大聲告訴你

全部回覆(4)
僅有的幸福

我的理解是 先加載一個小圖,然後用 css3 濾鏡模糊一下,然後懶加載,大圖加載完成後替換一下 src .

具體可以參考這篇文章 http://www.jackpu.com/medium-...

淡淡煙草味

filter: blur(10px), 載入完成 filter: blur(0)

曾經(jīng)蠟筆沒有小新

知乎是跟 Medium 一樣用 canvas 來模糊小圖的,大圖加載完了就去掉。好處是可以控制模糊的演算法,缺點(diǎn)就是比較重。

我這裡是利用了瀏覽器預(yù)設(shè)模糊小圖的方式來過渡,https://blog.crimx.com/2016/1...,好處是比較輕,相容性也不錯,但小圖得事先模糊才能有比較好的效果。不考慮相容性也可以用 CSS 模糊。

為情所困

原理上面都說的差不多。這裡我也做成了一個vue的組件,還將就能自己用
vue-img-loader

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板