图片加载优化

# 图片缓存 ## 示例1: 原本代码中使用的是uniapp自带的image标签 原代码 ![image.png](https://cos.easydoc.net/24688113/files/l9w547el.png) 修改后的代码 ![image.png](https://cos.easydoc.net/24688113/files/l9w54zvp.png) ## 示例2: 原本代码中使用的是uniapp自带的image标签,但要去掉缓存组件自带的占位图 原代码 ![image.png](https://cos.easydoc.net/24688113/files/l9w61fgt.png) 修改后的代码 ![image.png](https://cos.easydoc.net/24688113/files/l9w64386.png) 图中的**placeholder-img**意思是去掉默认的加载占位图 默认占位图如下: ![image33.png](https://cos.easydoc.net/24688113/files/l9w65e1v.png) ## 示例3: 原本代码中使用的是uview1.0的u-image标签 原代码 ![image.png](https://cos.easydoc.net/24688113/files/l9w6qcvy.png) 修改后的代码 ![image.png](https://cos.easydoc.net/24688113/files/l9w6r3b5.png) ## 示例4: 原代码中没有办法使用cache-image组件,可采用在js中转换 原代码 ![image.png](https://cos.easydoc.net/24688113/files/l9w6u93d.png) ![image.png](https://cos.easydoc.net/24688113/files/l9w6xh6l.png) 修改后的代码 ![image.png](https://cos.easydoc.net/24688113/files/l9w6u93d.png) ![image.png](https://cos.easydoc.net/24688113/files/l9w6vthc.png) ## 效果 图片缓存成功后再次访问时 ![image.png](https://cos.easydoc.net/24688113/files/l9w5klpy.png) ## api差异 除了有自动缓存图片的功能外,其它属性事件等都与对应的官方组件用法完全一致 # 图片压缩上传 ## 示例: 原代码 ![image.png](https://cos.easydoc.net/24688113/files/l9w72bk6.png) 修改后的代码 ![image.png](https://cos.easydoc.net/24688113/files/l9w72rs2.png) #### 需要注意 封装的方法除uniapp upload方法的原有参数外, 新增了俩个参数 **compressMode** :压缩模式;1代表强力压缩,体积更小但质量可能会差 2代表标准压缩,体积适中质量基本不损失 ; 不传默认取1强力压缩。 **compressRatio**:0-1之间的小数,代表要压缩的比例值。不传默认会按文件大小自动计算压缩比后压缩 ![image.png](https://cos.easydoc.net/24688113/files/l9w77kkl.png) ## api差异 除了有自动压缩图片的功能,以及新增的俩个参数外, 其它参数都与对应的官方组件用法完全一致