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

leizore發表於2017-10-14
網站優化

前言

作為一個有追求有信仰的程式設計師，做一個網站絕不是僅僅能用就行了，當我們實現功能後，或者在寫程式碼的過程中就要考慮怎麼去優化，一個網站要去優化，作為前端要考慮的是資源優化（減少 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" src="https://segmentfault.comhttps://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)
}

相關文章