1.前言

在访问页面的时候如果图片较大或者网速慢的情况会看到图片加载起来是有一个明显过程的，就是从上到下逐行呈现出来，这给用户的信号就是再等等图片还在加载中，并且图片没有加载出来的部分呈现一片空白，用户体验较差。而图片渐进式加载则是在渲染过程中，先显示整个图片的模糊轮廓，随着时间增加图片会变得越来越清晰，这样的处理尽管不能真正的提高页面加载速度，但是可以大大的提高用户的体验感，在视觉上达到“性能优化”的效果。

2.渐进式图片

（1）简介

渐进式图片其实是一种JPEG格式的图片，和普通的JPEG图片的区别如下：

• 普通jpeg图片是采用从左至右、从上到下的方式逐行进行压缩的，加载时严格按照从上到下的顺序，如果浏览器只收到了图片文件的一半，那么它只会显示图片的上半部分。
• 渐进式jpeg图片的压缩方式则是根据小波变换分层存储的，先存储低频（轮廓）内容，然后再存储高频（细节）内容。即使浏览器只收到一部分数据，它也可以显示整张图片，只是清晰度有损失。随着更多数据接收成功，图片会变的更清晰。

（2）生成方法

在PS中选择将图片存储为【web所有版本】（Alt+Shift+Ctrl+S），选择JPEG格式，勾选【连续】。

（3）优缺点

1）优点：

• 无需开发，减少编码成本。

• 减少等待时间，用户可以先看到图片的轮廓再逐步补充细节。

2）缺点：

• 图片需要转换成为渐进式格式，有一定的成本，因为现有图片大多是普通格式压缩的。

• 终端的支持程度不够，现在还有一些落后的浏览器（如IE8）对渐进式格式的支持较弱。不过随着时间推移，这部分浏览器会逐渐被淘汰。

（4）交错PNG/GIF

PNG和GIF格式的图片也有类似于渐进JPEG的视觉加载效果，称为交错GIF、交错PNG，在PS中导出时，选择将图片存储为【web所有版本】，选择对应的图片格式，勾选【交错】即可。

3.progressive-image插件介绍

（1）介绍

一个适用于原生JS和Vue2的渐进式图像加载模块。

（2）原理

实现图片在加载过程中由模糊到清晰的过程，需要两张图片实现，一张为体积比较小的预览图，一张为原图，预览图会先加载成功，然后对其进行模糊化处理，直到原图加载成功后，用原图替代预览图。

1）预览图模糊处理

• filter: blur(2vw);保持相同的模糊度，而页面的尺寸无关。
• transform: scale(1.05); 添加图片过渡动画

2） 图片切换防抖动

如果预览图和原图的宽高比例不一致，同时原图加载后删除预览图，就会出现抖动，故在原图加载完后，不立即删除预览图，而是设置为 opacity:0

3）js处理

 checkImage 函数在渲染完成和页面滚动时检测可视区 view 内是否有图片需要懒加载。

 loadImage 函数用来替换预览图，加载原图触发动画。

（3）安装

$ npm install progressive-image --save
 
$ yarn add progressive-image

（4）Vue.js版本的使用

1）模块引入

import progressive from 'progressive-image/dist/vue'

Vue.use(progressive, {
  removePreview: true,
  scale: true
})

removePreview——加载完成后是否移除预览图

scale——加载完成后是否使用缩放效果作为过渡动画

2）引入CSS样式

<link href="./node_modules/progressive-image/dist/index.css" rel="stylesheet" type="text/css">

or

<link href="//unpkg.com/progressive-image/dist/index.css" rel="stylesheet" type="text/css">

3）在HTML结构中使用

核心——使用v-progressive指令，只要在需要的 img 标签上添加即可，绑定原图src

img标签的src——预览图url

data-srcset——支持响应式图片，例如：

4.基于progressive-image封装一个Vue组件

（1）代码示例

（2）参数说明

命名	含义	类型	默认值	是否必传
imgSrc	图片地址，包括原图、预览图和响应式图片	Object	{ src: '', preview: '', srcset: '' }	是
width	图片宽度	String	300px	否
height	图片高度	String	auto	否
scale	加载完后是否展示缩放的过渡动画	Boolean	true	否
removePreview	加载完后是否移除预览图	Boolean	true	否

（3）插槽

name	说明
progressive-content	可将该组件用作背景图，在插槽中填充具体内容

（4）用例

5.总结

图片渐进式加载尽管没有真正的提升页面加载速度，但是可以有效的提升用户感知性能，如果搭配懒加载使用，可以达到节省流量的效果。此外，还可以通过动态绘制 canvas 的方式来展现图片渐进式加载过程中的模糊效果，可参考知乎和 Medium 。