优化图片加载(同步更新)

src/components/OnlineReader.vue

@@ -1,10 +1,15 @@
 <script setup>
-import {computed, ref} from "vue";
+import {computed, ref, watch} from "vue";
 import store from "../store/index.js";
 let onlineReadingScrollbar = ref()
 let links = ref()
-let index = ref(0)
+let index = ref(0)  //下标
-let temp_index = ref(0)   //用于跳转
+let page = ref(0)   //页数  下标+1=页数  用于跳转
+
+let imagesForLoading = ref([])
+let loadIndex = ref(0)
+let isReading = ref(false)
+
 let max = ref(0)
 let current_page = 0
 let lengthPerPage = computed(() => {
@@ -13,9 +18,11 @@ let lengthPerPage = computed(() => {
 let readingGallery = computed(() => {
   return store.state.readingGallery
 })
-let isShowUp = computed(() => {
+watch((store.state), (value) => {
-  alterPage()
+  if(value.isReading && !isReading.value) {
-  return store.state.isReading
+    alterPage()
+    isReading.value = true
+  }
 })
 
 //切换本子
@@ -28,19 +35,31 @@ function alterPage(){
     max.value = 0
   }
   index.value = 0
-  temp_index.value = 1
+  page.value = 1
+  loadIndex.value = 0
+  imagesForLoading.value.splice(0)
+  loadImage()
 }
 
 //跳转到对应页数
 function jump(targetIndex){
   links.value = readingGallery.value.images.slice(targetIndex * lengthPerPage.value, (targetIndex + 1) * lengthPerPage.value)
   index.value = targetIndex
-  temp_index.value = targetIndex + 1
+  page.value = targetIndex + 1
+  imagesForLoading.value.splice(0)
+  loadIndex.value = 0
+  loadImage()
   onlineReadingScrollbar.value.setScrollTop(0)
 }
 
+function loadImage(){
+  if(loadIndex.value < links.value.length)
+    imagesForLoading.value.push(links.value[loadIndex.value++])
+}
+
 function closeDialog(){
   onlineReadingScrollbar.value.setScrollTop(0)
+  isReading.value = false
   store.commit("_closeReader")
 }
 
@@ -78,7 +97,7 @@ function set_current_page(page){
 </script>
 
 <template>
-  <el-dialog v-model="isShowUp" @close="closeDialog" width="100%" top="0" fullscreen>
+  <el-dialog v-model="isReading" @close="closeDialog" width="100%" top="0" fullscreen>
     <template #header style="padding-bottom: 0">
       在线预览:  {{readingGallery.name}}<br>
       页数：{{readingGallery.pages}}<br>
@@ -88,9 +107,9 @@ function set_current_page(page){
       </div>
     </template>
     <el-scrollbar height="75vh" ref="onlineReadingScrollbar">
-      <div v-for="(link, i) in links" style="display: inline-block; text-align: center">
+      <div v-for="(link, i) in imagesForLoading" style="display: inline-block; text-align: center">
         <el-image  :src="link" :style="{'width': 'auto', 'text-align': 'center', 'background-color': 'ghostwhite'}"
-                  :preview-src-list="links" :initial-index="i" @switch="switch_page" @show="set_current_page(i)" loading="lazy"/> <br>
+                  :preview-src-list="links" :initial-index="i" @switch="switch_page" @show="set_current_page(i)" loading="lazy" @load="loadImage"/> <br>
         {{lengthPerPage * index + i + 1}}
       </div>
     </el-scrollbar>
@@ -108,10 +127,10 @@ function set_current_page(page){
     <div v-if="max >= 4" style="text-align: center">
       <el-button @click="jump(index - 1)" :disabled="index === 0" size="small">上一页</el-button>
       1 &lt;
-      <el-input-number v-model="temp_index" :min="1" :max="max"/>
+      <el-input-number v-model="page" :min="1" :max="max"/>
       &lt; {{max}}
       <el-button @click="jump(index + 1)" :disabled="index === max - 1" size="small">下一页</el-button>
-      <el-button @click="jump(temp_index - 1)" size="large">跳转</el-button>
+      <el-button @click="jump(page - 1)" size="large">跳转</el-button>
     </div>
   </el-dialog>
 </template>