作用:提高软件性能和用户体验,优化图片加载和渲染速度

思路:先使用uni.getImageInfo()方法获取图片信息,然后将图片信息保存到本地缓存中,下次再访问相同图片时,直接从本地缓存里拿到本地路径访问。

示例:

<template>
  <view>
     <image :src="storageSrc"/>
  </view>
</template>

<script>
import { getImage } from "@/api/device/xxx";
export default {
  data() {
    return {
       storageSrc:null
    }
  },
  created() {
       this.getImage();
  },
  methods:{
	    //请求图片地址
		getImage(){
			uni.showLoading({mask:true,title:'加载中'});
			getImage().then(res=>{
                    let imgSrc = res.imgSrc;
                    //先获取缓存里的图片请求路径,如果与需要访问的图片相同,直接使用此前缓存的本地图片地址
					if(uni.getStorageSync('imgSrc') === imgSrc){
						this.storageSrc= uni.getStorageSync('imgPath');
					}else{
						uni.getImageInfo({                                                                             
                            //图片的路径,可以是相对路径,临时文件路径,存储文件路径,网络图片路径	
							src:imgSrc,
							success:res=> {
                                //图片加载成功后,缓存请求地址和本地地址
								uni.setStorageSync('imgSrc',imgSrc)
								uni.setStorageSync('imgPath',res.path)
                                //使用本地图片地址渲染
								this.storageSrc= res.path;
							}
						})
					}
                    uni.hideLoading();
				}
			})
		},
	}
}
</script>

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐