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

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

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

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

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

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

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

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

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

最终效果：

Box</a>.ru<a href="https://www.jb51.cc/tag/njs/" target="_blank" class="keywords">njs</a>.cn/show/jwjikcng" width="400" height="300">

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

demo完整代码

display: none;" onclick="cnblogs_code_hide('54709fc6-b25f-4f71-bd79-55977224b3d0',event)" src="https://www.jb51.cc/res/2019/03-18/21/405b18b4b6584ae338e0f6ecaf736533.gif" alt="">

大图片加载从模糊到清晰大图片加载从模糊到清晰 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" 效果加个延时图片URL失效请自行替换 imgurl

        imgObject.src </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt; <a href="https://www.jb51.cc/tag/imgur/" target="_blank" class="keywords">imgur</a>l;
        imgObject.onload </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span> <span style="background-color: #f5f5f5; color: #0000ff;"&gt;function</span><span style="background-color: #f5f5f5; color: #000000;"&gt;(){
            ele.src </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt; <a href="https://www.jb51.cc/tag/imgur/" target="_blank" class="keywords">imgur</a>l;
            ele.setAttribute(</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;class</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;,</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;thumbnails complete</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;);
        }
    },</span><span style="background-color: #f5f5f5; color: #000000;"&gt;1000</span><span style="background-color: #f5f5f5; color: #000000;"&gt;)
    </span><span style="background-color: #f5f5f5; color: #000000;"&gt;<</span><span style="background-color: #f5f5f5; color: #000000;"&gt;script src</span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;http://ru<a href="https://www.jb51.cc/tag/njs/" target="_blank" class="keywords">njs</a>.cn/gist/jwjikcng/all</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;></span><span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;script</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;script</span><span style="color: #0000ff;"&gt;></span>

</body>
</html>

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

相关推荐