好像没那么复杂吧？
因为在玩摄影，到了一定的程度就接触了些Photoshop，在编辑完jpg格式照片保存的时候，有好几个选项可以选，其中有几个是关于在网页中挂载图片的，一个是一行一行的加载，还有一个是先加载模糊的，然后再逐渐清晰，还有一个是先加载黑白的再逐步变为彩色的。如果在本地实验，速度太快，除非照片超大，否则看不出效果。

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

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

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

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

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

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