在网页图片显示的时候，会发现许多网站采用了先模糊，然后在慢慢清晰的过程，这样的加载用户体验是比较好的，那么如何实现呐？默认加载2张图片，一张缩略图，一张原图，当打开网页的时候默认只显示缩略图
<div class="box">
<img src="" class="bg"/>
<img src="" class="show_img"/>
</div>
.box{
position: relative;overflow: hidden;height: 300px;width: 300px;
}
.box img{
width: 100%;height: 100%;
}
.box .bg{/*缩略图*/
display: block;filter: blur(15px);transform: scale(1);
}
.box .show_img{/*加载完成显示的实际图*/
position: absolute;opacity: 0;top: 0;left: 0;transition: opacity 1s linear;
}
<script>
var show_img=document.querySelector('.show_img'),
/*图片加载完成*/
show_img.onload = function () {
show_img.style.opacity="1";
};
</script>
服务热线 19970861797
