图片预加载功能优化

server.config.ts

@@ -3,11 +3,11 @@ import type { ServerOptions } from 'vite'
 const server: ServerOptions = {
   proxy: {
     '^/?(api|file)/': {
-      target: 'http://192.168.10.41:8200',
+      // target: 'http://192.168.10.41:8200',
       // target: 'http://192.168.10.178:8200',
       // target: 'http://192.168.10.108:8200',
       // target: 'http://cet-test.markingtool.cn',
-      // target: 'http://192.168.10.136:80',
+      target: 'http://192.168.10.136:80',
       // target: 'http://cet-dev.markingtool.cn:8200',
     },
   },

src/modules/marking/mark/index.vue

@@ -43,17 +43,17 @@
         <span class="preview" :style="{ left: previewLeft }" @click="onPreview">
           <svg-icon name="preview"></svg-icon>
         </span>
-        <!-- <div ref="imgWrap" :class="{ 'text-center': center }" class="img-wrap scroll-auto">
+        <div ref="imgWrap" :class="{ 'text-center': center }" class="img-wrap scroll-auto">
           <img
             ref="paperImg"
             :src="dataUrl"
             alt=""
             class="paper-img"
-            :style="{ 'background-color': frontColor }"
+            :style="{ 'background-color': frontColor, maxWidth: '100%' }"
             @load="imgLoaded"
           />
-        </div> -->
-        <div ref="imgWrap" class="img-wrap scroll-auto flex-1 p-base" :class="{ 'text-center': center }">
+        </div>
+        <!-- <div ref="imgWrap" class="img-wrap scroll-auto flex-1 p-base" :class="{ 'text-center': center }">
           <img
             ref="paperImg"
             :src="currentTask.dataUrl"
@@ -62,7 +62,7 @@
             :style="{ 'background-color': frontColor, maxWidth: '100%' }"
             @load="imgLoaded"
           />
-        </div>
+        </div> -->
         <scoring-panel-with-confirm
           v-if="currentTask"
           :id="currentTask?.taskId"
@@ -168,6 +168,7 @@ import SampleAStatus from '@/assets/images/status-sample-a.png'
 import SampleBStatus from '@/assets/images/status-sample-b.png'
 import RemarkBox from './remark-box.vue'
 import { usePreloadImageToTask } from '@/utils/usePreloadImageToTask'
+import { preloadImg } from '@/utils/common'
 import type { SetImgBgOption } from '@/hooks/useSetImgBg'
 import type { ExtractApiResponse } from '@/api/api'
 import type { MarkHeaderInstance } from 'global-type'
@@ -670,9 +671,10 @@ const imgLoaded = () => {
 
 const handleTaskPool = () => {
   currentTaskPool.forEach((task: any) => {
-    if (!task.dataUrl) {
-      usePreloadImageToTask(imgOption, frontColor, setFrontColor, task)
-    }
+    preloadImg(task?.url)
+    // if (!task.dataUrl) {
+    //   usePreloadImageToTask(imgOption, frontColor, setFrontColor, task)
+    // }
   })
 }
 </script>

src/modules/marking/mark/remark-box.vue

@@ -52,6 +52,7 @@ import useVModel from '@/hooks/useVModel'
 import BaseTable from '@/components/element/BaseTable.vue'
 import { throttle } from 'lodash-es'
 import { usePreloadImageToTask } from '@/utils/usePreloadImageToTask'
+import { preloadImg } from '@/utils/common'
 import useMarkHeader from '@/hooks/useMarkHeader'
 const props = defineProps<{ imgOption: any }>()
 
@@ -66,9 +67,10 @@ const getMarkHistory = async () => {
   let res = await useFetch('getMarkHistory').fetch()
   markHistoryList.value = res.markHistoryList
   markHistoryList.value.forEach((task: any) => {
-    if (!task.dataUrl) {
-      usePreloadImageToTask(imgOptionCom, frontColor, setFrontColor, task)
-    }
+    // if (!task.dataUrl) {
+    //   usePreloadImageToTask(imgOptionCom, frontColor, setFrontColor, task)
+    // }
+    preloadImg(task?.url)
   })
   nextTick(() => {
     if (!markHistoryList.value.length) {

src/utils/common.ts

@@ -294,3 +294,13 @@ export const setPaneSize = (e: any) => {
   const mainStore = useMainStore()
   mainStore.setPaneSizeConfig(location.pathname, e[0].size)
 }
+
+const images: any = []
+export const preloadImg = (url: any) => {
+  const find = images.find((img: any) => img.src == url)
+  if (url && !find) {
+    const img = new Image()
+    img.src = url
+    images.push(img)
+  }
+}