前端加载大图片从模糊到清晰
打开天猫随便点了个链接,加载了一张大的背景图片,该图片从非常模糊到正常显示有一个过程,深入了解一下它的实现过程。 打开控制台,禁用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完整代码
大图片加载从模糊到清晰
大图片加载从模糊到清晰
imgObject.src </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> imgUrl;
imgObject.onload </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;">(){
ele.src </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> imgUrl;
ele.setAttribute(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">class</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">,</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">thumbnails complete</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">);
}
},</span><span style="background-color: #f5f5f5; color: #000000;">1000</span><span style="background-color: #f5f5f5; color: #000000;">)
</span><span style="background-color: #f5f5f5; color: #000000;"><</span><span style="background-color: #f5f5f5; color: #000000;">script src</span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">http://runjs.cn/gist/jwjikcng/all</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">></span><span style="color: #0000ff;"></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></ <span style="color: #800000;">body<span style="color: #0000ff;">><span style="color: #0000ff;"></<span style="color: #800000;">html<span style="color: #0000ff;">> ? (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |