图片资源预加载

pages/index/index.vue

@@ -12,24 +12,26 @@
 		<product ref="单品" v-show="page == '单品'" />
 
 		<bottom-suspension-frame ref="pages" @onChange="pageChange" />
+		<preloadedPicture />
 	</view>
 </template>
 
 <script>
-import index from './index/index.vue'
-import store from './index/store.vue'
-import myCase from './index/myCase.vue'
-import userCenter from './index/userCenter.vue'
-import videos from './index/videos.vue'
+import index from './index/index'
+import store from './index/store'
+import myCase from './index/myCase'
+import userCenter from './index/userCenter'
+import videos from './index/videos'
 
-import dataBank from './cloud/dataBank.vue'
-import school from './cloud/school.vue'
-import product from './cloud/product.vue'
-import workbench from './cloud/workbench.vue'
+import dataBank from './cloud/dataBank'
+import school from './cloud/school'
+import product from './cloud/product'
+import workbench from './cloud/workbench'
 
-import bottomSuspensionFrame from "./modules/bottomSuspensionFrame.vue";
+import preloadedPicture from "./modules/preloadedPicture"
+import bottomSuspensionFrame from "./modules/bottomSuspensionFrame";
 export default {
-	components: { bottomSuspensionFrame, index, store, myCase, userCenter, dataBank, school, product, workbench, videos },
+	components: { bottomSuspensionFrame, index, store, myCase, userCenter, dataBank, school, product, workbench, videos, preloadedPicture },
 	data() {
 		return {
 			swiperItemID: 'index',

pages/index/modules/preloadedPicture.vue

@@ -0,0 +1,49 @@
+<template>
+    <view>
+        <block v-for="(src, index) in imgList" :key="index">
+            <image class="image" v-if="index == showIndex" :src="src" @error="imgOnload" @load="imgOnload" />
+        </block>
+    </view>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            showIndex: 0,
+            imgList: ['https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404111712812810046B1fbafed9.png',
+                'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202405151715764356769B1a729abd.webp',
+                'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202405281716860202553Be55ba55.webp',
+                'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202405281716861339513B3a575413.webp',
+                'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404101712715614059B373541f3.png',
+                'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404101712714494391B1100afab.png',
+                'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404101712714638752Bc18af43.png',
+                'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404101712714733820B3d50bdd4.png',
+                'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404101712714646946B480ca84d.png',
+                'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404101712714656283B28c9d1df.png',
+                'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202405081715135815557B4db50f9.webp',
+                'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202405291716965428111B4602d616.webp',
+                'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202405281716863577428B1faf5081.webp',
+                'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404231713854678447B26b4363.svg',
+                'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404241713944430197B47af9b2f.png',
+            ]
+        }
+    },
+    methods: {
+        imgOnload() {
+            this.showIndex += 1;
+            if (this.imgList.length == this.showIndex) console.log("图片资源预加载完成")
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.image {
+    position: absolute;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    z-index: -99999999;
+}
+</style>