web前端图片模糊到清晰的实现过程

在网页图片显示的时候，会发现许多网站采用了先模糊，然后在慢慢清晰的过程，这样的加载用户体验是比较好的，那么如何实现？

默认加载2张图片，一张缩略图，一张原图，当打开网页的时候默认只显示缩略图，然后我们把缩略图模糊处理后按照原图尺寸显示，这样做的目的是为了提高用户体验；

使用js去监听原图的加载，当原图加载成功后，我们把缩略图隐藏，让原图显示出来。这样就实现了图片由模糊变成清晰的过程，为了让变化有渐变效果，我们需要使用到css的transition属性。具体代码实现如下：

html:

<div class="box">

<img src="data:images/playboy-s.jpg" class="bg"/>

<img src="data:images/playboy-b.jpg" class="show_img"/>

</div>

css:

.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;

}

js：

<script>

var show_img=document.querySelector('.show_img'),

/*图片加载完成*/

show_img.onload = function () {

show_img.style.opacity="1";

};

</script>

如果不需要有渐变效果，可以采用如下方法

<img src="data:images/playboy-s.jpg" name="myImage" width="960" height="1285" id="myImage"  alt="懒人图库" />

<script language="JavaScript" type="text/javascript">

var img = new Image();

img.src = "images/playboy-b.jpg";

img.onload = function() {

document.getElementById('myImage').src = this.src;

}

</script>

playboy-s是缩略图，playboy-b是完整图