javascript - What is the principle of loading images on Zhihu?

Question

At the beginning, it is all blurry. When it is within the screen view range, it will be displayed in high definition.

Is the pre-processed low-pixel image loaded at the beginning, and then the high-definition image is displayed?

Or, is it some other method?

Answer 1

My understanding is to load a small image first, then use a css3 filter to blur it, and then load it lazily. After the large image is loaded, replace the src.

For details, please refer to this article http://www.jackpu.com/medium-...

Answer 2

filter: blur(10px), loading completed filter: blur(0)

Answer 3

Zhihu uses canvas to blur small images like Medium, and removes large images after loading. The advantage is that it can control the fuzzy algorithm, but the disadvantage is that it is relatively heavy.

I used the browser's default method of blurring small images to make the transition, https://blog.crimx.com/2016/1..., the advantage is that it is relatively light and has good compatibility, but the small images must be blurred in advance Only then can we have better results. You can use CSS blur regardless of compatibility.

Answer 4

The principle is almost the same as mentioned above. Here I also made a vue component, which I can use by myself
vue-img-loader