uni-app项目实战笔记23--解决首次加载额外图片带来的网络消耗问题

前面实现了图片的预览和切换,不过存在一个问题,当我们点击某张图片进行预览时,会把列表中其他图片一并进行请求,带来额外的网络开销。如下面的图片列表

点击上面图片列表中的第一张图片,观察浏览器控制台,发现一次性额外加载了多张其他图片,带来额外性能和网络开销。

因此我们希望预览图片时,减少不必要一次性图片加载。

方法一:只渲染当前图片

html 复制代码
<swiper circular :current="currentIndex" @change="swiperChange">
	<swiper-item  v-for="(item,index) in classList" :key="item._id">
		<image v-if="index == currentIndex"  @click="maskChange" :src="item.picurl" mode="aspectFill"></image>
	</swiper-item>
</swiper>

通过在swiper中image添加v-if条件,只有当条件满足时才渲染。上面的代码中实现:索引为当前索引。如此便实现只加载当前预览图片的请求。但是,当我们左右滑动图片时,前后出现了空白类似卡顿现象:

显然这种方法虽然节省了性能和网络开销,但带来不好的用户体验。

方法二:声明一个变量,存储当前用户预览过的图片,和前后各一张图片,当预览到第1张继续左滑时,切换为最后一张,当用户预览到最后一张继续右滑时切换为第一张。下面是代码实现:

javascript 复制代码
//声明一个响应式变量数组readImages,记录用户预览过的图片
const readImages = ref([])
//图片列表,classList的值参照前面的笔记
const classList = ref([])
//首次加载
onLoad((e)=>{
	currentId.value = e.id
	currentIndex.value = classList.value.findIndex(item=>item._id == currentId.value)
	readImageFun()
})

//切换图片
const swiperChange =(e) =>{
	currentIndex.value = e.detail.current;
	readImageFun()
}

//获取需要加载的图片,数组添加3张图片,从左到右分别是前一张,当前张,后一张
function readImageFun(){
	readImages.value.push(
		currentIndex.value<=0 ? classList.length-1 : currentIndex.value-1,
		currentIndex.value,
		currentIndex.value>= classList.length-1 ? 0 : currentIndex.value+1
	)
	//使用set进行去重
	readImages.value = [...new Set(readImages.value)]
}

核心在于:

1、往数组添加3张图片,从左到右分别是前一张,当前张,后一张;

2、如果当前是第一张,则上张为图片数组的最后一张;

3、如果当前是最后一张,则下一张为图片数组的第一张。

模板的v-if判断条件替换为:

html 复制代码
 v-if="readImages.includes(index)"

如此便可实现以最小网络消耗加载资源同时切换时没有空白卡顿现象产生。

相关推荐
前端 贾公子8 小时前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
源码_V_saaskw9 天前
宇鹿家政服务系统小程序ThinkPHP+UniApp
微信小程序·小程序·uni-app·微信公众平台
懒惰的bit9 天前
STM32F103C8T6 学习笔记摘要(四)
笔记·stm32·学习
zkyqss9 天前
OVS Faucet练习(下)
linux·笔记·openstack
xw510 天前
支付宝小程序IDE版本迭代异常
uni-app·支付宝
!win !10 天前
支付宝小程序IDE版本迭代异常
uni-app·支付宝小程序
浦东新村轱天乐10 天前
【麻省理工】《how to speaking》笔记
笔记
奔跑的蜗牛AZ10 天前
TiDB 字符串行转列与 JSON 数据查询优化知识笔记
笔记·json·tidb
cwtlw10 天前
Excel学习03
笔记·学习·其他·excel
杭州杭州杭州10 天前
计算机网络笔记
笔记·计算机网络