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)"

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

相关推荐
这就是佬们吗3 分钟前
初识 docker [上]
java·开发语言·笔记·docker·容器
Star在努力1 小时前
15-C语言:第15天笔记
c语言·笔记·算法
老虎06272 小时前
JavaWeb(苍穹外卖)--学习笔记14
笔记·学习
范纹杉想快点毕业3 小时前
Zynq SOC FPGA嵌入式裸机设计和开发教程自学笔记:硬件编程原理、基于SDK库函数编程、软件固化
网络·笔记·stm32·单片机·嵌入式硬件·tcp/ip·fpga开发
Warren985 小时前
Java Collections工具类
java·开发语言·笔记·python·学习·oracle·硬件工程
五行缺弦6 小时前
Java 笔记 serialVersionUID
java·开发语言·笔记
破碎的南瓜6 小时前
OSPF笔记
网络·笔记·智能路由器
程知农7 小时前
uniapp_微信小程序_根据胶囊按钮计算出的导航栏高度为什么不是44px?
微信小程序·小程序·uni-app
ssjnbnbnb8 小时前
数据库概述(学习笔记)
数据库·笔记·学习
笑衬人心。8 小时前
JVM 笔记:类加载、内存管理、垃圾收集与垃圾收集器
java·jvm·笔记