树生长序列帧分组依次加载

src/views/TreeAnimation.vue

@@ -3,15 +3,121 @@
     ref="hammer-target"
     class="tree-animation"
   >
-    <img
-      v-for="index of frameNumber"
-      v-show="((index - 1) === currentFrameIdx) || ((index - 1) === (currentFrameIdx - 1))"
-      :key="index"
-      :src="`${$publicPath}tree-grow-frames/初始画面_${(index - 1).toString().padStart(4, '0')}.jpg`"
-      alt=""
-      @load="onImgLoad(index - 1)"
-      @error="onImgError(index - 1)"
+    <template>
+      <img
+        v-for="index of 100"
+        v-show="((index - 1) === currentFrameIdx) || ((index - 1) === (currentFrameIdx - 1))"
+        :key="index"
+        :src="`${$publicPath}tree-grow-frames/初始画面_${(index - 1).toString().padStart(4, '0')}.jpg`"
+        alt=""
+        @load="onImgLoad(index - 1)"
+        @error="onImgError(index - 1)"
+      >
+    </template>
+    <template
+      v-if="currentFrameIdx >= 50"
     >
+      <img
+        v-for="index of 100"
+        v-show="((index - 1 + 100) === currentFrameIdx) || ((index - 1 + 100) === (currentFrameIdx - 1))"
+        :key="index + 100"
+        :src="`${$publicPath}tree-grow-frames/初始画面_${(index - 1 + 100).toString().padStart(4, '0')}.jpg`"
+        alt=""
+        @load="onImgLoad(index - 1 + 100)"
+        @error="onImgError(index - 1 + 100)"
+      >
+    </template>
+    <template
+      v-if="currentFrameIdx >= 100"
+    >
+      <img
+        v-for="index of 100"
+        v-show="((index - 1 + 200) === currentFrameIdx) || ((index - 1 + 200) === (currentFrameIdx - 1))"
+        :key="index + 200"
+        :src="`${$publicPath}tree-grow-frames/初始画面_${(index - 1 + 200).toString().padStart(4, '0')}.jpg`"
+        alt=""
+        @load="onImgLoad(index - 1 + 200)"
+        @error="onImgError(index - 1 + 200)"
+      >
+    </template>
+    <template
+      v-if="currentFrameIdx >= 150"
+    >
+      <img
+        v-for="index of 100"
+        v-show="((index - 1 + 300) === currentFrameIdx) || ((index - 1 + 300) === (currentFrameIdx - 1))"
+        :key="index + 300"
+        :src="`${$publicPath}tree-grow-frames/初始画面_${(index - 1 + 300).toString().padStart(4, '0')}.jpg`"
+        alt=""
+        @load="onImgLoad(index - 1 + 300)"
+        @error="onImgError(index - 1 + 300)"
+      >
+    </template>
+    <template
+      v-if="currentFrameIdx >= 200"
+    >
+      <img
+        v-for="index of 100"
+        v-show="((index - 1 + 400) === currentFrameIdx) || ((index - 1 + 400) === (currentFrameIdx - 1))"
+        :key="index + 400"
+        :src="`${$publicPath}tree-grow-frames/初始画面_${(index - 1 + 400).toString().padStart(4, '0')}.jpg`"
+        alt=""
+        @load="onImgLoad(index - 1 + 400)"
+        @error="onImgError(index - 1 + 400)"
+      >
+    </template>
+    <template
+      v-if="currentFrameIdx >= 250"
+    >
+      <img
+        v-for="index of 100"
+        v-show="((index - 1 + 500) === currentFrameIdx) || ((index - 1 + 500) === (currentFrameIdx - 1))"
+        :key="index + 500"
+        :src="`${$publicPath}tree-grow-frames/初始画面_${(index - 1 + 500).toString().padStart(4, '0')}.jpg`"
+        alt=""
+        @load="onImgLoad(index - 1 + 500)"
+        @error="onImgError(index - 1 + 500)"
+      >
+    </template>
+    <template
+      v-if="currentFrameIdx >= 300"
+    >
+      <img
+        v-for="index of 100"
+        v-show="((index - 1 + 600) === currentFrameIdx) || ((index - 1 + 600) === (currentFrameIdx - 1))"
+        :key="index + 600"
+        :src="`${$publicPath}tree-grow-frames/初始画面_${(index - 1 + 600).toString().padStart(4, '0')}.jpg`"
+        alt=""
+        @load="onImgLoad(index - 1 + 600)"
+        @error="onImgError(index - 1 + 600)"
+      >
+    </template>
+    <template
+      v-if="currentFrameIdx >= 350"
+    >
+      <img
+        v-for="index of 100"
+        v-show="((index - 1 + 700) === currentFrameIdx) || ((index - 1 + 700) === (currentFrameIdx - 1))"
+        :key="index + 700"
+        :src="`${$publicPath}tree-grow-frames/初始画面_${(index - 1 + 700).toString().padStart(4, '0')}.jpg`"
+        alt=""
+        @load="onImgLoad(index - 1 + 700)"
+        @error="onImgError(index - 1 + 700)"
+      >
+    </template>
+    <template
+      v-if="currentFrameIdx >= 400"
+    >
+      <img
+        v-for="index of (frameNumber - 800)"
+        v-show="((index - 1 + 800) === currentFrameIdx) || ((index - 1 + 800) === (currentFrameIdx - 1))"
+        :key="index + 800"
+        :src="`${$publicPath}tree-grow-frames/初始画面_${(index - 1 + 800).toString().padStart(4, '0')}.jpg`"
+        alt=""
+        @load="onImgLoad(index - 1 + 800)"
+        @error="onImgError(index - 1 + 800)"
+      >
+    </template>
     <SlideTip
       v-show="currentFrameIdx === frameNumber - 1"
       class="slide-tip"
@@ -54,8 +160,8 @@ export default {
   },
   mounted() {
     this.intervalId = setInterval(() => {
-      if (this.frameLoadProgress === '100%') {
-      // if ((this.loadCountDown === 0) && (this.imgStateList[this.currentFrameIdx + 1] !== undefined)) {
+      // if (this.frameLoadProgress === '100%') {
+      if ((this.loadCountDown === 0) && (this.imgStateList[this.currentFrameIdx + 1] !== undefined)) {
         this.isLoading = false
         do {
           this.currentFrameIdx++