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

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