摘要：到圖片完全出來時候顯示大圖，同時模糊到清晰當然了，如果想要更好的效果，要配合圖片懶加載，就是當滾輪滾動到特定位置在加載圖片，這篇文章重點是將第二種解決方案網站優化，圖片從模糊到清晰，廢話不多說，上代碼圖片從模糊到清晰部分部分部分

前言

作為一個有追求有信仰的程序員，做一個網站絕不是僅僅能用就行了，當我們實現功能后，或者在寫代碼的過程中就要考慮怎么去優化，一個網站要去優化，作為前端要考慮的是資源優化（減少 http 請求啊，固定圖片壓縮啊，精靈圖合并啊，或者使用圖標字體啊），安全問題（代碼壓縮丑化，存儲 或者 時候加密啊），還有性能優化，資源優化的重中之重就是圖片的優化，加載圖片是很耗費資源的。正常情況下，當圖片沒有加載過來的時候，如果沒有外層標簽限制高度，會沒有圖片的位置，圖片資源加載過來之后，開始下載，如果圖片夠大，圖片會從頭到尾慢慢顯示，給人非常不舒服的感覺。

解決方案

圖片的優化其實現在有兩種解決方案：

先顯示一張背景圖，到圖片加載過來時候顯示加載圖片

先加載圖片的縮略圖，然后模糊，縮略圖非常小，結合模糊效果，可以比純色更好的占位符，而不會犧牲有效載荷。到圖片完全出來時候顯示大圖，同時模糊到清晰

當然了，如果想要更好的效果，要配合圖片懶加載網站優化，就是當滾輪滾動到特定位置在加載圖片，這篇文章重點是將第二種解決方案，圖片從模糊到清晰，廢話不多說，上代碼

圖片從模糊到清晰

html部分

css部分

figure .image-wrap {
    width: 500px;
    height: 312px;
    position: relative;

    overflow: hidden;
}
figure .image-wrap .oldImage {
    width: 100%;
    -webkit-filter: blur(10px);
    transition: all 0.5s

}

js部分

var image = document.querySelector(".oldImage"),
    imageParentDom = image.parentNode,
    src = image.dataset.src;
var newImage = document.createElement("img");

newImage.src = src;
newImage.style.cssText = "position: absolute;left:0;top:0;width:100%;z-index:-1";
newImage.onload = function () {
    imageParentDom.appendChild(newImage);
    setTimeout(() => {
        imageParentDom.removeChild(image);
    },500)
}