Uni-app使用渐进式加载图片插件(progressive-image)

问题背景

需求场景：有一个透明背景png图片，背景是用css填充的渐变色，由于图片较大（带宽太小）导致先出现背景，后出现图片有明显延迟。
通常由两种解决方案：1是延迟加载；2是渐进式加载，也就是先出现一张尺寸非常小的预览图片（2~3k），这张图片可以是模糊版的图片，或者是一个占位图片（比如显示加载中的图片）；这里采用的是第二种方案，使用progressive-image插件，如果直接在vue里面使用还是比较方便的，用uni-app会遇到坑，其实最后发现也就是不能直接使用uni-app自己的image组件，必须要使用img，涉及图片样式穿透耽搁了不少时间。

安装插件

yarn add progressive-image

main.js引入插件

//main.js
import progressive from 'progressive-image/dist/vue'

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

导入预览图片（或者是一张占位图片）

引入样式

      .progressive {
        position: relative;
        display: block;
        overflow: hidden;
      }
      /deep/ .progressive img {
          /*这个就是原本图片的样式，包含正式图片和预览图片都会使用这个样式*/
        display: block;
        width: 200px;
        max-width: 100%;
        height: auto;
        border: 0 none;
        margin-left: 75px;
        margin-top: 20px;
      }
      /deep/ .progressive img.preview {
        /*filter: blur(2vw);*/
        /*transform: scale(1.05);*/
      }
      /deep/ .progressive img.hide {
        opacity: 0;
      }
      /deep/ .progressive img.origin {
        position: absolute;
        left: 0;
        top: 0;
        /*animation: origin 1.5s ease-out;*/
      }
      /deep/ .progressive img.origin-scale {
        position: absolute;
        left: 0;
        top: 0;
        /*animation: origin-scale 1s ease-out;*/
      }
      @-moz-keyframes origin {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
      @-webkit-keyframes origin {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
      @-o-keyframes origin {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
      @keyframes origin {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
      @-moz-keyframes origin-scale {
        0% {
          opacity: 0;
          transform: scale(1.1);
        }
        100% {
          opacity: 1;
          transform: scale(1);
        }
      }
      @-webkit-keyframes origin-scale {
        0% {
          opacity: 0;
          transform: scale(1.1);
        }
        100% {
          opacity: 1;
          transform: scale(1);
        }
      }
      @-o-keyframes origin-scale {
        0% {
          opacity: 0;
          transform: scale(1.1);
        }
        100% {
          opacity: 1;
          transform: scale(1);
        }
      }
      @keyframes origin-scale {
        0% {
          opacity: 0;
          transform: scale(1.1);
        }
        100% {
          opacity: 1;
          transform: scale(1);
        }
      }

html标签（必须要使用img原生标签）

图片源

        images: {
          preview: "/static/person-preview.png",
          src: "/static/person.png"
        }

另外需要注意的是，图片外部要有一个progressive样式的块元素；

      <view class="person-image">
        <!--<image mode="widthFix" src="/static/person.png"></image>-->
        <view class="progressive">
          <img class="preview" v-progressive="images.src" :src="images.preview" />
        </view>
      </view>