web前端圖片加載優化，從圖片模糊到清晰的實現過程

在網頁圖片顯示的時候，會發現許多網站采用了先模糊，然后在慢慢清晰的過程，這樣的加載用戶體驗是比較好的，那么如何實現吶？

 

默認加載2張圖片，一張縮略圖，一張原圖，當打開網頁的時候默認只顯示縮略圖，然后我們把縮略圖模糊處理后按照原圖尺寸顯示，這樣做的目的是為了提高用戶體驗；

使用js去監聽原圖的加載，當原圖加載成功后，我們把縮略圖隱藏，讓原圖顯示出來。這樣就實現了圖片由模糊變成清晰的過程，為了讓變化有漸變效果，我們需要使用到css的transition屬性。具體代碼實現如下：

 

html:

<div class="box">
  <img src="" class="bg"/>
  <img src="" 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;
}

51220網站目錄 https://www.51220.cn

 

js：

<script>
var show_img=document.querySelector('.show_img'),
/*圖片加載完成*/  
show_img.onload = function () {
    show_img.style.opacity="1";
};
</script>