84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
一开始，都是模糊的，当在屏幕视图范围内，就会显示高清。
是不是一开始加载的是预处理的低像素的图片，随后再显示高清图片？
或者，是别的什么方法？
我的理解是 先加载一个小图，然后用 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
我的理解是 先加载一个小图，然后用 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