摘要：我們可以自己來實(shí)現(xiàn)這個(gè)效果，實(shí)現(xiàn)過程如下渲染一個(gè)容器，保持與原圖的比例和尺寸相同，填充一個(gè)較淺的背景色先加載小圖，同時(shí)使用模糊效果小圖加載完成，開始請求大圖大圖加載完成，顯示大圖，隱藏小圖。

用過 Medium 的用戶不會(huì)不記得它的圖片加載方式——純色-高斯模糊-加載完成并顯示。

這是一種很優(yōu)雅的圖片預(yù)加載的方式(因?yàn)?Medium 的圖片質(zhì)量都很高，如果全部一下加載的話，需要的時(shí)間難以想象，所以，這是一種很棒的做法)。從第一次打開 Medium 這個(gè)網(wǎng)站開始，我就被這種技術(shù)給吸引住了——好吧，直到今天才去研究它。

在 Medium 網(wǎng)站，打開任何一篇文章，然后，我們來 inspect 一下：

可以看到，Medium 為每一張圖片都設(shè)置了這么長的一段 HTML。這樣做的目的就是為了讓這個(gè)圖片的逐步加載過程能夠平滑如一，同時(shí)還能在一定程度上提升用戶體驗(yàn)。就算圖片沒有加載出來，顯示給用戶的是一個(gè)高斯模糊的圖片，其實(shí)也不失美感。

那么，這個(gè)圖片的逐步加載過程具體是什么樣的呢？

渲染一個(gè) div 容器，這個(gè)容器就是用來顯示最終展示給用戶的圖片的。通過對容器設(shè)置一個(gè)百分比的 padding-bottom 來讓其比例和大小與最終圖片的比例和大小相同，這樣，就能避免圖片加載出來的時(shí)候?qū)е碌捻撁娴闹嘏牛?/p>

使用 img 標(biāo)簽來加載一張?jiān)瓐D質(zhì)量的 10% ~ 20% 左右的圖片，這張圖片的質(zhì)量很低，而且很小，所以可以馬上加載出來；

一旦小圖加載完成，就開始使用 canvas 來進(jìn)行繪制，添加模糊效果，同時(shí)，開始請求最終要加載的大圖；

當(dāng)最終的大圖也加載完成之后，顯示大圖，隱藏掉 canvas。

以上就是 Medium 的做法。

我們可以自己來實(shí)現(xiàn)這個(gè)效果，實(shí)現(xiàn)過程如下：

渲染一個(gè)容器，保持與原圖的比例和尺寸相同，填充一個(gè)較淺的背景色；

先加載小圖，同時(shí)使用模糊效果；

小圖加載完成，開始請求大圖；

大圖加載完成，顯示大圖，隱藏小圖。

所以，綜合來看，其實(shí)并不復(fù)雜。

首先，我們可以把大圖和小圖的 URL 和尺寸都存起來，通過標(biāo)簽的 data 屬性去動(dòng)態(tài)獲取。所以，我們的 HTML 可以像下面這樣寫：

其中各個(gè)參數(shù)代表的含義是：

data-real-width: 大圖的寬度

data-real-height: 大圖的高度

data-src: 小圖的 URL

src: 大圖的 URL

同時(shí)，我們需要定義一些 CSS 的 class 來對大圖和小圖進(jìn)行處理：

.blur-img-container {
    position: relative;
    background: #eeeeee;
    background-size: cover;
    overflow: hidden;
}

.blur-img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.4s ease-in-out;
}

.blur-img-container .thumb-loaded {
    opacity: 1;
    filter: blur(10px);
    transform: scale(1);
}

.blur-img-container .large-loaded {
    opacity: 1;
}

.blur-img-container .thumb-hidden {
    opacity: 0;
}

然后，我們的重點(diǎn)在于 JavaScript 的處理。

需要?jiǎng)討B(tài)的設(shè)置每個(gè)圖片的容器的 padding-bottom 以防止頁面發(fā)生重排；

通過 image 的 onload 事件來控制其樣式和進(jìn)度

第一點(diǎn)，動(dòng)態(tài)設(shè)置我們的容器的 padding-bottom?？梢酝ㄟ^計(jì)算寬高比然后換算成百分比：

elem.style.paddingBottom = `${(realHeight / realWidth) * 100}%`;

第二點(diǎn)，使用圖像的 onload 事件來控制加載的進(jìn)度：

let thumb = new Image();
thumb.src = thumbSrc;
thumb.onload = () => {
    // 小圖加載完成，顯示小圖，設(shè)置樣式
    setStyle(thumb, "thumb-loaded");
};
elem.appendChild(thumb);

let realImg = new Image();
realImg.src = lgSrc;
realImg.onload = () => {
    // 大圖加載完成，顯示大圖，隱藏小圖
    setStyle(realImg, "large-loaded");
    setStyle(thumb, "thumb-hidden");
};

// 將大圖添加到頁面中
elem.appendChild(realImg);

其實(shí)，只要把上面兩點(diǎn)主要的功能做好了，我們的這個(gè)效果基本上就實(shí)現(xiàn)了。

可以通過我的 GitHub Repo 來查看完整的源代碼和例子 blur-image。

同時(shí)，我將這個(gè)小功能封裝成了一個(gè) package，需要的朋友可以通過 npm install blur-image 或者 bower install blur-image 進(jìn)行安裝和使用。具體的安裝和使用方法可以查看文檔。

參考鏈接
How Medium does progressive image loading
The “Blur Up” Technique for Loading Background Images