使用高斯模糊的效果逐步加载图片（仿 Medium）

用过 Medium 的用户不会不记得它的图片加载方式——纯色-高斯模糊-加载完成并显示。

这是一种很优雅的图片预加载的方式(因为 Medium 的图片质量都很高，如果全部一下加载的话，需要的时间难以想象，所以，这是一种很棒的做法)。从第一次打开 Medium 这个网站开始，我就被这种技术给吸引住了——好吧，直到今天才去研究它。

在 Medium 网站，打开任何一篇文章，然后，我们来 inspect 一下：

1. <figure name="512a"  
2.         id="512a"  
3.         class="graf--figure graf--layoutCroppedHeightPreview graf-after--h3" 
4. > 
5.     <div class="aspectRatioPlaceholder is-locked"> 
6.         <div class="aspectRatioPlaceholder-fill"  
7.              style="padding-bottom: 30%;" 
8.         ></div> 
9.         <div class="progressiveMedia js-progressiveMedia graf-image is-canvasLoaded"  
10.              data-image-id="1*dZnfeZiXxf2BgN3VSQuOlA.jpeg"  
11.              data-width="3600"  
12.              data-height="3600"  
13.              data-scroll="native" 
14.         > 
15.             <img src="https://cdn-images-1.medium.com/freeze/fit/t/60/18/1*dZnfeZiXxf2BgN3VSQuOlA.jpeg?q=20"  
16.                  crossorigin="anonymous"  
17.                  class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail" 
18.             > 
19.             <canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"  
20.                     width="75"  
21.                     height="22" 
22.             ></canvas> 
23.             <img class="progressiveMedia-image js-progressiveMedia-image"  
24.                  data-src="https://cdn-images-1.medium.com/fit/t/1600/480/1*dZnfeZiXxf2BgN3VSQuOlA.jpeg"  
25.                  src="https://cdn-images-1.medium.com/fit/t/1600/480/1*dZnfeZiXxf2BgN3VSQuOlA.jpeg" 
26.             > 
27.             <noscript class="js-progressiveMedia-inner"> 
28.                 &lt;img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/fit/t/1600/480/1*dZnfeZiXxf2BgN3VSQuOlA.jpeg"&gt; 
29.             </noscript> 
30.         </div> 
31.     </div> 
32. </figure>  

可以看到，Medium 为每一张图片都设置了这么长的一段 HTML。这样做的目的就是为了让这个图片的逐步加载过程能够平滑如一，同时还能在一定程度上提升用户体验。就算图片没有加载出来，显示给用户的是一个高斯模糊的图片，其实也不失美感。

那么，这个图片的逐步加载过程具体是什么样的呢?

1. 渲染一个 div 容器，这个容器就是用来显示最终展示给用户的图片的。通过对容器设置一个百分比的 padding-bottom 来让其比例和大小与最终图片的比例和大小相同，这样，就能避免图片加载出来的时候导致的页面的重排;
2. 使用 img 标签来加载一张原图质量的 10% ~ 20% 左右的图片，这张图片的质量很低，而且很小，所以可以马上加载出来;
3. 一旦小图加载完成，就开始使用 canvas 来进行绘制，添加模糊效果，同时，开始请求最终要加载的大图;
4. 当最终的大图也加载完成之后，显示大图，隐藏掉 canvas。

以上就是 Medium 的做法。

我们可以自己来实现这个效果，实现过程如下：

1. 渲染一个容器，保持与原图的比例和尺寸相同，填充一个较浅的背景色;
2. 先加载小图，同时使用模糊效果;
3. 小图加载完成，开始请求大图;
4. 大图加载完成，显示大图，隐藏小图。

所以，综合来看，其实并不复杂。

首先，我们可以把大图和小图的 URL 和尺寸都存起来，通过标签的 data 属性去动态获取。所以，我们的 HTML 可以像下面这样写：

1. <figure name="blur" 
2.         class="blur-img-container" 
3.         data-real-width="1174" 
4.         data-real-height="670" 
5.         data-src="images/sm2.jpeg" 
6.         src="https://cdn-images-1.medium.com/max/2000/1*0WwtDkE1q6HGZwD6Kn9SuQ.jpeg" 
7. ></figure>  

其中各个参数代表的含义是：

• data-real-width: 大图的宽度
• data-real-height: 大图的高度
• data-src: 小图的 URL
• src: 大图的 URL

同时，我们需要定义一些 CSS 的 class 来对大图和小图进行处理：

1. .blur-img-container { 
2.     position: relative; 
3.     background: #eeeeee; 
4.     background-size: cover; 
5.     overflow: hidden; 
6. } 
7.  
8. .blur-img-container img { 
9.     position: absolute; 
10.     top: 0; 
11.     left: 0; 
12.     width: 100%; 
13.     height: 100%; 
14.     opacity: 0; 
15.     transition: all 0.4s ease-in-out; 
16. } 
17.  
18. .blur-img-container .thumb-loaded { 
19.     opacity: 1; 
20.     filter: blur(10px); 
21.     transform: scale(1); 
22. } 
23.  
24. .blur-img-container .large-loaded { 
25.     opacity: 1; 
26. } 
27.  
28. .blur-img-container .thumb-hidden { 
29.     opacity: 0; 
30. }  

然后，我们的重点在于 JavaScript 的处理。

• 需要动态的设置每个图片的容器的 padding-bottom 以防止页面发生重排;
• 通过 image 的 onload 事件来控制其样式和进度

第一点，动态设置我们的容器的 padding-bottom。可以通过计算宽高比然后换算成百分比：

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

第二点，使用图像的 onload 事件来控制加载的进度：

1. let thumb = new Image(); 
2. thumb.src = thumbSrc; 
3. thumb.onload = () => { 
4.     // 小图加载完成，显示小图，设置样式 
5.     setStyle(thumb, 'thumb-loaded'); 
6. }; 
7. elem.appendChild(thumb); 
8.  
9. let realImg = new Image(); 
10. realImg.src = lgSrc; 
11. realImg.onload = () => { 
12.     // 大图加载完成，显示大图，隐藏小图 
13.     setStyle(realImg, 'large-loaded'); 
14.     setStyle(thumb, 'thumb-hidden'); 
15. }; 
16.  
17. // 将大图添加到页面中 
18. elem.appendChild(realImg);  

其实，只要把上面两点主要的功能做好了，我们的这个效果基本上就实现了。

可以通过我的 GitHub Repo 来查看完整的源代码和例子 blur-image。

同时，我将这个小功能封装成了一个 package，需要的朋友可以通过 npm install blur-image 或者 bower install blur-image 进行安装和使用。具体的安装和使用方法可以查看文档。

作者：Erichain_Zain

来源：51CTO