🐛 fix(custom): 修复网速过快导致图片快速切换的bug

src/routers/photo/item/index.tsx

@@ -1,31 +1,55 @@
 import { PhotoRouterImageCardType } from "../phototype";
-import { useState } from "react";
+import { useEffect, useState, useMemo } from "react";
 import ImgModals from "./modal";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import { Link, styled } from "@mui/material";
 import style from "./photo.module.less";
 import { ImageBasic } from "@components/image";
 import { Omit } from "@utils/index";
 import CollectionsIcon from "@mui/icons-material/Collections";
+import { getImageSize } from "@components/image/tool";
+
 type CardType = {
   data: PhotoRouterImageCardType;
 };
-
+const useLoading = (url: string) => {
+  const [isLoading, set] = useState<boolean>(true);
+  useMemo(async () => {
+    await getImageSize(url);
+    set(() => false);
+  }, [url]);
+  return isLoading;
+};
 export default function PhotoCard(props: CardType) {
   const { images, dynamic_id, ...resPorps } = props.data;
   const [open, set] = useState(false),
     handlerChangeOpen = () => set((open) => !open);
-  const modalPorps = { open, images, onClose: handlerChangeOpen, dynamic_id };
+  const modalPorps = { open, images, onClose: handlerChangeOpen, dynamic_id },
+    url = `${images[0].src}@${250}w.webp`;
+  const isLoading = useLoading(url);
   return (
     <div className={style["card"]}>
       <ImageBasic
-        url={`${images[0].src}@${250}w.webp`}
+        url={url}
         {...Omit(images[0], "src")}
         {...resPorps}
         title={"图片栏"}
         className={style["show-img"]}
         onClick={handlerChangeOpen}
-      />
+      >
+        <span
+          className={`absolute left-0 top-0 right-0 bottom-0 transition-all ${
+            isLoading ? "pointer-events-auto" : "pointer-events-none"
+          }`}
+          style={{
+            zIndex: 1,
+            transitionDuration: "400ms",
+            background: isLoading ? "hsla(0,0%,91.4%,.5)" : "transparent",
+            backdropFilter: !isLoading ? "blur(0)" : "blur(42.5px)",
+            WebkitBackdropFilter: !isLoading ? "blur(0)" : "blur(42.5px)",
+          }}
+        />
+      </ImageBasic>
       <ImgModals {...modalPorps} />
       <DivJump>
         <Link
@@ -65,6 +89,10 @@ const DivImgNum = styled("div")(({ theme }) => ({
   columnGap: "2px",
   pointerEvents: "none",
   fontSize: "14px",
+  borderTopRightRadius: "8px",
+  [theme.breakpoints.down("sm")]: {
+    borderTopRightRadius: "4px",
+  },
 }));
 
 const DivJump = styled("div")(({ theme }) => ({

src/routers/photo/masonry.tsx

@@ -41,10 +41,10 @@ const usePhotoMasonryData = (props: PhotoRouterMasonryType) => {
                 width: img.img_width,
               })),
             };
-            if (data.length < 3) {
+            if (data.length < 9) {
               message.info("没有更多图片了,尝试使用其他tag吧!");
             }
-            if (index === data.length - 3) {
+            if (index === data.length - 9) {
               return {
                 ...itemRes,
                 observer: true,