vue 使用原生canvas_适用于 vue.js 和原生 js 的渐进式图片加载

代码已经封装

先看简单例子 demo

HTML

基本的 HTML 结构如下

origin.jpg 就是原图，preview.jpg 是等比压缩后的预览图，比如原图是 400x200 则预览图可以使 20x10。

如果原图是 400x100 按照 4:1 的比例，预览图如果宽度是30，那么高度就是 7.5，所以图片裁剪这里会有坑，后面会遇到。

CSS

容器的基本样式

.progressive {

position: relative;

display: block;

overflow: hidden;

}

外层的 .progressive 默认是 div 也可以是其他任何需要的包裹元素

图片容器可以是固定尺寸，也可以是固定的宽高比(用 padding-top 的方式来确保容器的固定的宽高比例)，这就保证了原始图片加载之后不会出现容器尺寸的变化，然而这就必须计算每张图片的宽高比例。

知乎和 Meduim 都是获取到了原图尺寸，然后保持预览图(canvas)也是相同的尺寸，这样即使预览图被裁剪后和原图尺寸的比例不一致，也不会出现容器尺寸在原图加载之后会抖动的bug。

我们退而求其次，采取更简单粗暴的方式来做：预览图和原始图尽量保持相同的宽高比

原图加载完后，不删除预览图，而是设置为 opacity:0