網(wǎng)站優(yōu)化之路---圖片優(yōu)化，圖片從模糊到清晰

1fe1se 發(fā)布于2019-08-21 17:02 / 3550人閱讀

摘要：到圖片完全出來(lái)時(shí)候顯示大圖，同時(shí)模糊到清晰當(dāng)然了，如果想要更好的效果，要配合圖片懶加載，就是當(dāng)滾輪滾動(dòng)到特定位置在加載圖片，這篇文章重點(diǎn)是將第二種解決方案，圖片從模糊到清晰，廢話不多說(shuō)，上代碼圖片從模糊到清晰部分部分部分

前言

作為一個(gè)有追求有信仰的程序員，做一個(gè)網(wǎng)站絕不是僅僅能用就行了，當(dāng)我們實(shí)現(xiàn)功能后，或者在寫代碼的過(guò)程中就要考慮怎么去優(yōu)化，一個(gè)網(wǎng)站要去優(yōu)化，作為前端要考慮的是資源優(yōu)化（減少 http 請(qǐng)求啊，固定圖片壓縮啊，精靈圖合并啊，或者使用圖標(biāo)字體啊），安全問(wèn)題（代碼壓縮丑化，存儲(chǔ) cookie 或者storage 時(shí)候加密啊），還有性能優(yōu)化，資源優(yōu)化的重中之重就是圖片的優(yōu)化，加載圖片是很耗費(fèi)資源的。正常情況下，當(dāng)圖片沒(méi)有加載過(guò)來(lái)的時(shí)候，如果沒(méi)有外層標(biāo)簽限制高度，會(huì)沒(méi)有圖片的位置，圖片資源加載過(guò)來(lái)之后，開始下載，如果圖片夠大，圖片會(huì)從頭到尾慢慢顯示，給人非常不舒服的感覺(jué)。

解決方案

圖片的優(yōu)化其實(shí)現(xiàn)在有兩種解決方案：

先顯示一張背景圖，到圖片加載過(guò)來(lái)時(shí)候顯示加載圖片

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

當(dāng)然了，如果想要更好的效果，要配合圖片懶加載，就是當(dāng)滾輪滾動(dòng)到特定位置在加載圖片，這篇文章重點(diǎn)是將第二種解決方案，圖片從模糊到清晰，廢話不多說(shuō)，上代碼

圖片從模糊到清晰

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