網站優化之路---圖片優化，圖片從模糊到清晰

前言

做爲一個有追求有信仰的程序員，作一個網站毫不是僅僅能用就好了，當咱們實現功能後，或者在寫代碼的過程當中就要考慮怎麼去優化，一個網站要去優化，做爲前端要考慮的是資源優化（減小 http 請求啊，固定圖片壓縮啊，精靈圖合併啊，或者使用圖標字體啊），安全問題（代碼壓縮醜化，存儲 cookie 或者storage 時候加密啊），還有性能優化，資源優化的重中之重就是圖片的優化，加載圖片是很耗費資源的。正常狀況下，當圖片沒有加載過來的時候，若是沒有外層標籤限制高度，會沒有圖片的位置，圖片資源加載過來以後，開始下載，若是圖片夠大，圖片會從頭至尾慢慢顯示，給人很是不舒服的感受。

解決方案

圖片的優化其實如今有兩種解決方案：

1. 先顯示一張背景圖，到圖片加載過來時候顯示加載圖片
2. 先加載圖片的縮略圖，而後模糊，縮略圖很是小，結合模糊效果，能夠比純色更好的佔位符，而不會犧牲有效載荷。到圖片徹底出來時候顯示大圖，同時模糊到清晰

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

圖片從模糊到清晰

html部分

<figure>
    <div class="image-wrap">
      <img class="oldImage" src="https://img.findaily.cn/kol/201710/cstartMTZmODY5MTAtN2Q3OS00ZGNkLTk1YmMtMGNiNjVmOWYzNjU5XyNjcm9wLXdfMTgyOS1oXzEyMDAteF80Ni15XzAtcl8xIw==cend.jpg?x-oss-process=image/resize,p_10" data-src="https://img.findaily.cn/kol/201710/cstartMTZmODY5MTAtN2Q3OS00ZGNkLTk1YmMtMGNiNjVmOWYzNjU5XyNjcm9wLXdfMTgyOS1oXzEyMDAteF80Ni15XzAtcl8xIw==cend.jpg">
    </div>
</figure>

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)
}