web前端图片加载优化，从图片模糊到清晰的实现过程
在网页图片显示的时候，会发现许多网站采用了先模糊，然后在慢慢清晰的过程，这样的加载用户体验是比较好的，那么如何实现呐？
默认加载2张图片，一张缩略图，一张原图，当打开网页的时候默认只显示缩略图，然后我们把缩略图模糊处理后按照原图尺寸显示，这样做的目的是为了提高用户体验；
使用js去监听原图的加载，当原图加载成功后，我们把缩略图隐藏，让原图显示出来。这样就实现了图片由模糊变成清晰的过程，为了让变化有渐变效果，我们需要使用到css的transition属性。具体代码实现如下：
html:
1 <div class="box"> 2 <img src="" class="bg"/> 3 <img src="" class="show_img"/> 4 </div>
css:
1 .box{ 2 position: relative;overflow: hidden;height: 300px;width: 300px; 3 } 4 .box img{ 5 width: 100%;height: 100%; 6 } 7 .box .bg{/*缩略图*/ 8 display: block;filter: blur(15px);transform: scale(1); 9 } 10 .box .show_img{/*加载完成显示的实际图*/ 11 position: absolute;opacity: 0;top: 0;left: 0;transition: opacity 1s linear; 12 }
51220网站目录 https://www.51220.cn
js：
1 <script> 2 var show_img=document.querySelector('.show_img'), 3 /*图片加载完成*/ 4 show_img.onload = function () { 5 show_img.style.opacity="1"; 6 }; 7 </script>
