优化序列帧加载

code/src/pages/B1Village/index.module.scss

@@ -243,6 +243,7 @@
 
           // 图片的序列帧
           .B1imgMove {
+            min-width: 100px;
             position: absolute;
             bottom: 248px;
             left: 40%;
@@ -263,7 +264,17 @@
                 animation-play-state: paused;
               }
             }
-   
+            
+            .B1imgMoveTitTxt{
+              width: 100%;
+              height: 100%;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              color: #fff;
+              font-size: 20px;
+            }
+
           }
 
         }

code/src/pages/B1Village/index.tsx

@@ -30,7 +30,6 @@ function B1Village() {
     );
   }, [uId, villageData]);
 
-
   //当前村落的 信息
   const curVillage = useMemo(
     () =>
@@ -39,6 +38,17 @@ function B1Village() {
     [uId, villageData]
   );
 
+  // 每个村落有多少个标签
+  const [tagFlagArr, setTagFlagArr] = useState<
+    { id: number; flag: boolean; done: boolean }[]
+  >([]);
+
+  useEffect(() => {
+    setTagFlagArr(
+      curVillage.map((v) => ({ id: v.id, flag: false, done: false }))
+    );
+  }, [curVillage]);
+
   useEffect(() => {
     const query = new URLSearchParams(location.search);
     const param = query.get("id");
@@ -60,56 +70,74 @@ function B1Village() {
     if (ruDom) ruDom.remove();
 
     clearTimeout(time.current);
-    time.current = window.setTimeout(() => {
-      if (infoInd === -1) return;
-
-      if (moveIn.current && moveWai.current) {
-        // 配置的数据 帧数
-        const zhenNum = curVillage[infoInd].zhen;
-
-        // 配置的数据 帧动画的速度
-        const zhenSuDu = curVillage[infoInd].zhenSuDu;
-
-        // 图片的总宽度(自适应的宽度)
-        moveIn.current.style.width = "auto";
-        const imgWidth = moveIn.current.clientWidth;
-
-        // 设置外层盒子的宽度(取整)
-        const waiWdith = Math.round(imgWidth / zhenNum);
-        moveWai.current.style.width = waiWdith + "px";
-
-        // 重新设置图片的宽度（整数）
-        const lastInWdith = waiWdith * zhenNum;
-        moveIn.current.style.width = lastInWdith + "px";
-
-        // console.log(imgWidth, imgWidth / num);
-
-        const styleStr = `.B1infoRowAc .B1imgMoveMain {
-               animation: tab2MoveImg ${(zhenNum / zhenSuDu).toFixed(
-                 1
-               )}s steps(${zhenNum}) infinite;
-             }
-             @keyframes tab2MoveImg {
-               100% {
-                 left: -${lastInWdith}px;
+
+    if (tagFlagArr[infoInd] && tagFlagArr[infoInd].flag) {
+      time.current = window.setTimeout(() => {
+        if (infoInd === -1) return;
+
+        if (moveIn.current && moveWai.current) {
+          // 配置的数据 帧数
+          const zhenNum = curVillage[infoInd].zhen;
+
+          // 配置的数据 帧动画的速度
+          const zhenSuDu = curVillage[infoInd].zhenSuDu;
+
+          // 图片的总宽度(自适应的宽度)
+          moveIn.current.style.width = "auto";
+          const imgWidth = moveIn.current.clientWidth;
+
+          // 设置外层盒子的宽度(取整)
+          const waiWdith = Math.round(imgWidth / zhenNum);
+          moveWai.current.style.width = waiWdith + "px";
+
+          // 重新设置图片的宽度（整数）
+          const lastInWdith = waiWdith * zhenNum;
+          moveIn.current.style.width = lastInWdith + "px";
+
+          // console.log(imgWidth, imgWidth / num);
+
+          const styleStr = `.B1infoRowAc .B1imgMoveMain {
+                 animation: tab2MoveImg ${(zhenNum / zhenSuDu).toFixed(
+                   1
+                 )}s steps(${zhenNum}) infinite;
                }
-             }`;
-        const styletDom = document.createElement("style");
-        styletDom.type = "text/css";
-        styletDom.id = "myStyle";
-        styletDom.innerHTML = styleStr;
-        document.querySelector("html")?.appendChild(styletDom);
-      }
-    }, 100);
-  }, [curVillage, infoInd]);
+               @keyframes tab2MoveImg {
+                 100% {
+                   left: -${lastInWdith}px;
+                 }
+               }`;
+          const styletDom = document.createElement("style");
+          styletDom.type = "text/css";
+          styletDom.id = "myStyle";
+          styletDom.innerHTML = styleStr;
+          document.querySelector("html")?.appendChild(styletDom);
+        }
+      }, 100);
+    }
+  }, [curVillage, infoInd, tagFlagArr]);
 
   useEffect(() => {
-    if (infoInd !== -1) setFullFu();
+    if (infoInd !== -1) {
+      setFullFu();
+    }
   }, [infoInd, setFullFu]);
 
   const time = useRef(-1);
 
   useEffect(() => {
+    if (infoInd !== -1) {
+      // 把 tab的flag变成true
+      setTagFlagArr(
+        tagFlagArr.map((v, i) => ({
+          ...v,
+          flag: i === infoInd ? true : v.flag,
+        }))
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [infoInd]);
+
+  useEffect(() => {
     window.addEventListener("resize", setFullFu, true);
 
     return () => {
@@ -220,17 +248,34 @@ function B1Village() {
               </div>
               {/* 图片的序列帧 */}
               <div className="B1imgMove" ref={infoInd === i ? moveWai : null}>
-                {uId ? (
-                  <img
-                    ref={infoInd === i ? moveIn : null}
-                    className={classNames("B1imgMoveMain")}
-                    style={{
-                      // width: v.zhen * 100 + "%",
-                      maxWidth: "100000000px",
-                    }}
-                    src={`${baseUrl}/B1Village/pc/${uId}/move${v.id}.png`}
-                    alt=""
-                  />
+                {uId && tagFlagArr[i] && tagFlagArr[i].flag ? (
+                  <>
+                    <img
+                      onLoad={() =>
+                        setTagFlagArr(
+                          tagFlagArr.map((c) => ({
+                            ...c,
+                            done: c.id === v.id ? true : c.done,
+                          }))
+                        )
+                      }
+                      ref={infoInd === i ? moveIn : null}
+                      className={classNames("B1imgMoveMain")}
+                      style={{
+                        // width: v.zhen * 100 + "%",
+                        maxWidth: "100000000px",
+                        opacity: tagFlagArr[i].done ? "1" : "0",
+                      }}
+                      src={`${baseUrl}/B1Village/pc/${uId}/move${v.id}.png`}
+                      alt=""
+                    />
+                    <div
+                      style={{ opacity: tagFlagArr[i].done ? "0" : "1" }}
+                      className="B1imgMoveTitTxt"
+                    >
+                      加载中...
+                    </div>
+                  </>
                 ) : null}
               </div>
             </div>

code/src/pages/B1VillageM/index.module.scss

@@ -54,6 +54,7 @@
         }
 
         .B1imgMove {
+          min-width: 100px;
           width: auto;
           margin: 0 auto;
           height: 50%;
@@ -71,6 +72,16 @@
             // max-height: 1000px;
             object-fit: fill;
           }
+
+          .B1imgMoveTitTxt {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: #fff;
+            font-size: 20px;
+          }
         }
 
         // 左右箭头

code/src/pages/B1VillageM/index.tsx

@@ -40,6 +40,17 @@ function B1VillageM() {
     [uId, villageData]
   );
 
+  // 每个村落有多少个标签
+  const [tagFlagArr, setTagFlagArr] = useState<
+    { id: number; flag: boolean; done: boolean }[]
+  >([]);
+
+  useEffect(() => {
+    setTagFlagArr(
+      curVillage.map((v) => ({ id: v.id, flag: false, done: false }))
+    );
+  }, [curVillage]);
+
   useEffect(() => {
     const query = new URLSearchParams(location.search);
     const param = query.get("id");
@@ -60,48 +71,51 @@ function B1VillageM() {
     const ruDom = document.querySelector("#myStyle");
     if (ruDom) ruDom.remove();
     clearTimeout(time.current);
-    time.current = window.setTimeout(() => {
-      if (infoInd === -1) return;
-
-      if (moveIn.current && moveWai.current) {
-        // 配置的数据 帧数
-        const zhenNum = curVillage[infoInd].zhen;
-
-        // 配置的数据 帧动画的速度
-        const zhenSuDu = curVillage[infoInd].zhenSuDu;
-
-        // 图片的总宽度(自适应的宽度)
-        moveIn.current.style.width = "auto";
-        const imgWidth = moveIn.current.clientWidth;
-
-        // 设置外层盒子的宽度(取整)
-        const waiWdith = Math.round(imgWidth / zhenNum);
-        moveWai.current.style.width = waiWdith + "px";
-
-        // 重新设置图片的宽度（整数）
-        const lastInWdith = waiWdith * zhenNum;
-        moveIn.current.style.width = lastInWdith + "px";
-
-        // console.log(imgWidth, imgWidth / num);
-
-        const styleStr = `.B1VinfoAc .B1imgMoveMain {
-               animation: tab2MoveImg ${(zhenNum / zhenSuDu).toFixed(
-                 1
-               )}s steps(${zhenNum}) infinite;
-             }
-             @keyframes tab2MoveImg {
-               100% {
-                 left: -${lastInWdith}px;
+
+    if (tagFlagArr[infoInd] && tagFlagArr[infoInd].flag) {
+      time.current = window.setTimeout(() => {
+        if (infoInd === -1) return;
+
+        if (moveIn.current && moveWai.current) {
+          // 配置的数据 帧数
+          const zhenNum = curVillage[infoInd].zhen;
+
+          // 配置的数据 帧动画的速度
+          const zhenSuDu = curVillage[infoInd].zhenSuDu;
+
+          // 图片的总宽度(自适应的宽度)
+          moveIn.current.style.width = "auto";
+          const imgWidth = moveIn.current.clientWidth;
+
+          // 设置外层盒子的宽度(取整)
+          const waiWdith = Math.round(imgWidth / zhenNum);
+          moveWai.current.style.width = waiWdith + "px";
+
+          // 重新设置图片的宽度（整数）
+          const lastInWdith = waiWdith * zhenNum;
+          moveIn.current.style.width = lastInWdith + "px";
+
+          // console.log(imgWidth, imgWidth / num);
+
+          const styleStr = `.B1VinfoAc .B1imgMoveMain {
+                 animation: tab2MoveImg ${(zhenNum / zhenSuDu).toFixed(
+                   1
+                 )}s steps(${zhenNum}) infinite;
                }
-             }`;
-        const styletDom = document.createElement("style");
-        styletDom.type = "text/css";
-        styletDom.id = "myStyle";
-        styletDom.innerHTML = styleStr;
-        document.querySelector("html")?.appendChild(styletDom);
-      }
-    }, 100);
-  }, [curVillage, infoInd]);
+               @keyframes tab2MoveImg {
+                 100% {
+                   left: -${lastInWdith}px;
+                 }
+               }`;
+          const styletDom = document.createElement("style");
+          styletDom.type = "text/css";
+          styletDom.id = "myStyle";
+          styletDom.innerHTML = styleStr;
+          document.querySelector("html")?.appendChild(styletDom);
+        }
+      }, 100);
+    }
+  }, [curVillage, infoInd, tagFlagArr]);
 
   useEffect(() => {
     if (infoInd !== -1) setFullFu();
@@ -110,6 +124,19 @@ function B1VillageM() {
   const time = useRef(-1);
 
   useEffect(() => {
+    if (infoInd !== -1) {
+      // 把 tab的flag变成true
+      setTagFlagArr(
+        tagFlagArr.map((v, i) => ({
+          ...v,
+          flag: i === infoInd ? true : v.flag,
+        }))
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [infoInd]);
+
+  useEffect(() => {
     window.addEventListener("resize", setFullFu, true);
 
     return () => {
@@ -171,13 +198,34 @@ function B1VillageM() {
             {/* 上面的 序列帧 和 左右箭头 */}
             <div className="B1imgMove" ref={infoInd === i ? moveWai : null}>
               {/* 图片的序列帧 */}
-              {uId ? (
-                <img
-                  ref={infoInd === i ? moveIn : null}
-                  className={classNames("B1imgMoveMain")}
-                  src={`${baseUrl}/B1Village/pc/${uId}/move${v.id}.png`}
-                  alt=""
-                />
+              {uId && tagFlagArr[i] && tagFlagArr[i].flag ? (
+                <>
+                  <img
+                    onLoad={() =>
+                      setTagFlagArr(
+                        tagFlagArr.map((c) => ({
+                          ...c,
+                          done: c.id === v.id ? true : c.done,
+                        }))
+                      )
+                    }
+                    ref={infoInd === i ? moveIn : null}
+                    className={classNames("B1imgMoveMain")}
+                    style={{
+                      // width: v.zhen * 100 + "%",
+                      maxWidth: "100000000px",
+                      opacity: tagFlagArr[i].done ? "1" : "0",
+                    }}
+                    src={`${baseUrl}/B1Village/pc/${uId}/move${v.id}.png`}
+                    alt=""
+                  />
+                  <div
+                    style={{ opacity: tagFlagArr[i].done ? "0" : "1" }}
+                    className="B1imgMoveTitTxt"
+                  >
+                    加载中...
+                  </div>
+                </>
               ) : null}
             </div>