前端加载大图片从模糊到清晰

打开天猫随便点了个链接，加载了一张大的背景图片，该图片从非常模糊到正常显示有一个过程，深入了解一下它的实现过程。

打开控制台，禁用Cache，模拟2G网络，刷新页面

查看请求列表，浏览器先请求了一张缩略图，设置为div的背景图片，div宽高等同于整个页面，效果看起来就像页面已经显示出来一样

在缩略图之上，才是正常尺寸图片显示到地方，当图片加载完毕显示出来就遮住了模糊的缩略图，当然也可以替换掉缩略图，在用户看来，模糊的图片随着加载过程变清晰了

如果直接给缩略图之上的img元素设置src，稍微大一点的图片加载起来是这幅德行：

这样的效果，男人看了沉默女人看了流泪，显然无法满足老板的要求，解决办法是等图片完全加载好了再显示出来，具体点来说：

创建image对象，将要加载的图片URL赋值给image对象的src，监听image对象的onload事件，在事件回调函数内修改img元素的src，也可以设置图片元素的position将元素偏移非可视区直接加载，图片加载完后丢回可视区

缩略图比较难看，为了有更好的用户体验，可以给缩略图加个高斯模糊filter: blur(4px)，图片加载完毕修改img src属性后，再将高斯模糊渐渐过渡到filter: blur(0)，图片就清晰了

最终效果：

demo中，缩略图用base64编码表示，这是节省带宽的一种方式，如果有多个缩略图，可用一个http请求以字符串按某个分隔符的形式返回，前端解析后使用，减少了http请求，图片加载优化还有更多方式，包括用css绘制简单的样式替代图片（根据需求选择更合适的图片格式，jpg适合色彩较多的场景，gif用于较复杂的动画，png适用于半透明场景），设置合理的缓存，图片懒加载（非可视区不加载）等等

demo完整代码