javascript - Was ist das Prinzip beim Laden von Bildern auf Zhihu?
我想大声告诉你
我想大声告诉你 2017-05-24 11:32:17
0
4
661

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?

我想大声告诉你
我想大声告诉你

Antworte allen(4)
仅有的幸福

我的理解是 先加载一个小图,然后用 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

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!