优化图片加载(同步更新)合并reset.css

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 temp_index = ref(0)   //用于跳转
+let 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) => {
+  if(value.isReading && !isReading.value) {
     alterPage()
-  return store.state.isReading
+    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")
 }
 
@@ -76,7 +95,7 @@ function set_current_page(page){
 </script>
 
 <template>
-  <el-dialog v-model="isShowUp" width="90%"  style="margin-top: 0; margin-bottom: 0; padding: 0" @close="closeDialog">
+  <el-dialog v-model="isReading" width="90%"  style="margin-top: 0; margin-bottom: 0; padding: 0" @close="closeDialog">
     <template #header style="padding-bottom: 0">
       在线预览:  {{readingGallery.name}}<br>
       页数：{{readingGallery.pages}}<br>
@@ -86,9 +105,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; min-height: 300px">
+      <div v-for="(link, i) in imagesForLoading" style="display: inline-block; text-align: center; min-height: 300px">
         <el-image :src="link" :style="{'width': '66vw', 'background-color': 'gary'}"
-                  :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>
@@ -106,10 +125,10 @@ function set_current_page(page){
     <span v-if="max >= 9">
       <el-button @click="jump(index - 1)" :disabled="index === 0">上一页</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">下一页</el-button>
-      <el-button @click="jump(temp_index - 1)" size="large">跳转</el-button>
+      <el-button @click="jump(page - 1)" size="large">跳转</el-button>
     </span>
   </el-dialog>
 </template>

src/main.js

@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import 'element-plus/dist/index.css'
 import element from "element-plus"
+import "./reset.css"
 import 'element-plus/theme-chalk/dark/css-vars.css'
 
 createApp(App).use(element).mount('#app')