添加进度条

src/components/HeaderVideo.vue

@@ -22,28 +22,76 @@ export default defineComponent({
   data() {
     return {
       currentFrame: 0,
-      timer: null
+      timer: null,
+      isLoading: true, // 加载状态
+      loadingProgress: 0, // 加载进度
+      preloadedImages: [] // 预加载的图片缓存
     }
   },
   methods:{
     handleVideoEnded:function (event){
       window.location.href = "/Homepage";
     },
+    preloadAllImages() {
+      this.isLoading = true;
+      this.loadingProgress = 0;
+
+      let loadedCount = 0;
+      const totalFrames = this.frames.length;
+
+      // 创建Promise数组
+      const preloadPromises = this.frames.map((src, index) => {
+        return new Promise((resolve, reject) => {
+          const img = new Image();
+
+          img.onload = () => {
+            this.preloadedImages[index] = img;
+            loadedCount++;
+            this.loadingProgress = Math.floor(loadedCount / totalFrames * 100);
+            resolve(img);
+          };
+
+          img.onerror = (e) => {
+            console.error(`无法加载图片: ${src}`, e);
+            loadedCount++;
+            this.loadingProgress = Math.floor(loadedCount / totalFrames * 100);
+            reject(e);
+          };
+
+          img.src = src;
+        });
+      });
+
+      // 所有帧加载完成后开始播放
+      Promise.all(preloadPromises)
+          .then(() => {
+            console.log("所有帧预加载完成");
+            this.isLoading = false;
+            this.start();
+          })
+          .catch(() => {
+            console.log("部分帧加载失败，但仍继续播放");
+            this.isLoading = false;
+            this.start();
+          });
+    },
+
     start() {
-      if (this.timer) return
-      const interval = 1000 / this.fps
+      if (this.timer) return;
+      const interval = 1000 / this.fps;
+
       this.timer = setInterval(() => {
-        const next = this.currentFrame + 1
+        const next = this.currentFrame + 1;
+
         if (next < this.frames.length) {
-          this.currentFrame = next
+          this.currentFrame = next;
         } else {
-          this.stop()
-          // 播放结束后等待 0.1 秒跳转
+          this.stop();
           setTimeout(() => {
             window.location.href = "/Homepage";
-          }, 100)
+          }, 100);
         }
-      }, interval)
+      }, interval);
     },
     stop() {
       if (this.timer) {
@@ -66,7 +114,7 @@ export default defineComponent({
   mounted() {
     if(this.$isMobile.phone)
     {
-      this.start();
+      this.preloadAllImages();
     }
     else
     {
@@ -95,11 +143,20 @@ export default defineComponent({
 <template>
 <div id="beginroot" class="pageroot">
  <div id="videodiv">
+   <!-- 加载进度条 -->
+   <div v-if="$isMobile.phone && isLoading" class="loading-container">
+     <div class="progress-container">
+       <div class="progress-bar" :style="{width: loadingProgress + '%'}"></div>
+     </div>
+     <div class="loading-text">加载中 {{ loadingProgress }}%</div>
+   </div>
+
    <img
        :src="frames[currentFrame]"
        id="beginwep"
        :alt="alt"
-       class="simple-frame-player" v-if="$isMobile.phone"
+       class="simple-frame-player"
+       v-if="$isMobile.phone && !isLoading"
    />
    <video v-else-if="$isMobile.tablet" poster="/logobeginPCpld.png"
           id="tbstart" muted autoplay controls="controls"
@@ -131,6 +188,33 @@ export default defineComponent({
 
 <style scoped lang="scss">
 @import "src/publicstyle.scss";
+.loading-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  width: 80%;
+  z-index: 10;
+}
+.progress-container {
+  background-color: rgba(255, 255, 255, 0.2);
+  height: 8px;
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 10px;
+}
+
+.progress-bar {
+  height: 100%;
+  background-color: #DAA520;
+  transition: width 0.3s ease;
+}
+
+.loading-text {
+  color: white;
+  font-size: 14px;
+}
 #beginroot{
   height: 100%;
   display: flex;