javascript - pc端新版知乎的这个图片加载是怎么做的？

Question

很好奇这个图片加载是怎么做的= =一般来说都是给一个默认的预加载图片

求解答~~

Answer 1

两张图片，一张宽度60的小图，一张原图。当打开网站默认只加载宽度60的小图，目的是为了节约网络流量提升用户体验，当浏览到图片位置时做2个动作：1、把小图片转Canvas处理加模糊效果 2、加载大图，加载完成替换小图；至于js怎么处理Canvas模糊效果已有现成框架，例如：StackBlur

Answer 2

动态调整高斯模糊的参数？

Answer 3

(……好惊悚的截图Σ( ° △ °|||)︴
这应该是渐进式jpeg吧？

Answer 4

估计是两张图片，一张是质量低但体积小的图片，用模糊来掩盖本就不清晰的图片，等两一张清晰的图片加载出来后替换原图去掉模糊效果。目的就是提供更优的用户体验。