图片预加载

src/utils/preLoadImg.js

@@ -0,0 +1,17 @@
+// 预加载图片方法
+
+const preLodeImg=(list)=>{
+    const arr=list||[]
+    arr.forEach(item => {
+        const image = new Image();
+        image.src = item;
+        image.onload = (e) => {
+          console.log("图预加载成功:",item);
+        };
+        image.onerror = (e) => {
+            console.log("图预加载失败",item,e);
+        };
+    });
+}
+
+export default preLodeImg

src/views/report/ChapterDetail.vue

@@ -15,6 +15,7 @@ import moment from 'moment';
 import AudioBox from './components/AudioBox.vue'
 import SharePoster from '@/components/SharePoster.vue'
 import Comment from '@/components/Comment.vue'
+import preLoadImg from '@/utils/preLoadImg.js'
 import { useRoute,onBeforeRouteUpdate,useRouter } from 'vue-router';
 
 const route=useRoute()
@@ -33,6 +34,9 @@ const getReportPPTImgs=async (e)=>{
     })
     if(res.code===200){
         pptImgs.value=res.data||[]
+        if(res.data&&res.data.length>0){
+            preLoadImg(res.data)
+        }
     }
 }
 

src/views/report/Detail.vue

@@ -8,6 +8,7 @@ import SharePoster from '@/components/SharePoster.vue'
 import Comment from '@/components/Comment.vue'
 import {apiReportDetail,apiReportMoreRecmd,apiReportDetailBanner,apiRddpShareImg,apiReportPPtImgs} from '@/api/report'
 import {apiGetWechatQRCode} from '@/api/common'
+import preLoadImg from '@/utils/preLoadImg.js'
 import { useRoute , onBeforeRouteUpdate,useRouter} from 'vue-router';
 import { useStore } from 'vuex';
 moment.locale('zh-cn')
@@ -28,6 +29,9 @@ const getReportPPTImgs=async ()=>{
     })
     if(res.code===200){
         pptImgs.value=res.data||[]
+        if(res.data&&res.data.length>0){
+            preLoadImg(res.data)
+        }
     }
 }