当前位置：首页 > news >正文

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

news 来源：原创 2025/6/23 6:01:32

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

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

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

方法一：只渲染当前图片

<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张继续左滑时，切换为最后一张，当用户预览到最后一张继续右滑时切换为第一张。下面是代码实现：

//声明一个响应式变量数组readImages，记录用户预览过的图片
const readImages = ref([])
//图片列表，classList的值参照前面的笔记
const classList = ref([])
//首次加载
onLoad((e)=>{currentId.value = e.idcurrentIndex.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判断条件替换为：