javascript - Was ist das Prinzip beim Laden von Bildern auf Zhihu?

Question

Am Anfang ist alles verschwommen, und wenn es sich im Sichtbereich des Bildschirms befindet, wird es in hoher Auflösung angezeigt.

Wird zu Beginn vorverarbeitete Bilder mit niedrigen Pixeln geladen und dann hochauflösende Bilder angezeigt?

Oder ist es eine andere Methode?

Answer 1

我的理解是 先加载一个小图，然后用 css3 滤镜模糊一下，然后懒加载，大图加载完成后替换一下 src .

具体可以参考一下这篇文章 http://www.jackpu.com/medium-...

Answer 2

filter: blur(10px), 加载完成 filter: blur(0)

Answer 3

知乎是跟 Medium 一样用 canvas 来模糊小图的，大图加载完了就去掉。好处是可以控制模糊的算法，缺点就是比较重。

我这里是利用了浏览器默认模糊小图的方式来过渡，https://blog.crimx.com/2016/1...，好处是比较轻，兼容性也不错，但小图得事先模糊才能有比较好的效果。不考虑兼容性也可以用 CSS 模糊。

Answer 4

原理上面都说的差不多。这里我也做成了一个vue的组件，还将就能自己用
vue-img-loader