uniapp图片缓存功能示例
uniapp图片缓存功能示例,提高软件性能和用户体验,优化图片加载和渲染速度
·
作用:提高软件性能和用户体验,优化图片加载和渲染速度
思路:先使用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>
更多推荐
已为社区贡献8条内容
所有评论(0)