在網頁圖片顯示的時候，會發現許多網站采用了先模糊，然后在慢慢清晰的過程，這樣的加載用戶體驗是比較好的，那么如何實現？
默認加載2張圖片，一張縮略圖，一張原圖，當打開網頁的時候默認只顯示縮略圖，然后我們把縮略圖模糊處理后按照原圖尺寸顯示，這樣做的目的是為了提高用戶體驗；
使用js去監聽原圖的加載，當原圖加載成功后，我們把縮略圖隱藏，讓原圖顯示出來。這樣就實現了圖片由模糊變成清晰的過程，為了讓變化有漸變效果，我們需要使用到css的transition屬性。具體代碼實現如下：
html:
<div class="box">
<img src="images/playboy-s.jpg" class="bg"/>
<img src="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="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是完整圖