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

淡淡的烟草味﹌ 2022-11-01 13:50 121阅读 0赞

# 问题背景 #

需求场景：有一个透明背景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
    })

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

![在这里插入图片描述][20210224163124986.png]

# 引入样式 #

.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"
            }

![在这里插入图片描述][20210224163614579.png]  
另外需要注意的是，图片外部要有一个`progressive`样式的块元素；

[20210224163124986.png]: /images/20221024/cca6053a59b74d2abae576cf5f64914a.png
[20210224163614579.png]: /images/20221024/4c8ad6fd22a24a0b924b0f04796c5941.png