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

时间:2022-10-19 19:28:57

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

打开控制台,禁用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完整代码

前端加载大图片从模糊到清晰前端加载大图片从模糊到清晰
<!DOCTYPE html>
<html>
<head>
<title>大图片加载从模糊到清晰</title>
<style type="text/css">
.content
{
position
: relative;
}
.thumbnails
{
width
: 300px;
position
: absolute;
left
: 0;
top
: 0;
z-index
: 1;
filter
: blur(4px);
transition
: all 0.7s;
}
.complete
{
filter
: blur(0);
}
</style>
</head>
<body>
<h3>大图片加载从模糊到清晰</h3>
<div class="content">
<img class="thumbnails" src="data:image/jpg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMtaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTY3NjUwN0QyQjRBMTFFN0FCMjJERjYzMkVDMTQzRUEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTY3NjUwN0UyQjRBMTFFN0FCMjJERjYzMkVDMTQzRUEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5Njc2NTA3QjJCNEExMUU3QUIyMkRGNjMyRUMxNDNFQSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5Njc2NTA3QzJCNEExMUU3QUIyMkRGNjMyRUMxNDNFQSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pv/uAA5BZG9iZQBkwAAAAAH/2wCEAAYEBAQFBAYFBQYJBgUGCQsI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">
</div>
<script type="text/javascript">
var ele = document.querySelector('.thumbnails');
// 为了看到效果加个延时
setTimeout(function(){
// 若图片URL失效请自行替换
var imgUrl = 'http://img8.zol.com.cn/bbs/upload/10569/10568721.jpg';
var imgObject = new Image();

imgObject.src
= imgUrl;
imgObject.onload
= function(){
ele.src
= imgUrl;
ele.setAttribute(
'class', 'thumbnails complete');
}
},
1000)
<script src='http://runjs.cn/gist/jwjikcng/all'></script>
</script>
</body>
</html>
View Code