fix

H5/src/pages/A1home/data.ts

@@ -2,8 +2,6 @@ export const imgInitFu = () => {
   var showcase = $('#showcase'),
     title = $('#item-title')
 
-    console.log('showcase', showcase)
-
   const fullWidth = window.innerHeight
 
   showcase.Cloud9Carousel({

H5/src/pages/A1home/index.module.scss

@@ -92,5 +92,24 @@
       height: 100%;
       z-index: 99;
     }
+
+    // 进度条
+    .progressBar{
+      display: none;
+      width: 80%;
+      height: 5px;
+      border-radius: 2px;
+      background-color: #4f4232;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      z-index: 999;
+      .progress{
+        width: 0%;
+        height: 100%;
+        background-color: #EBDBAF;
+      }
+    }
   }
 }

H5/src/pages/A1home/index.tsx

@@ -24,17 +24,28 @@ declare global {
 
 function A1home() {
 
-  useEffect(() => {
-    imgInitFu()
-  }, [])
+  const loadedUrls = useRef(new Set<string>()); // 新增：用于跟踪已加载的图片URL
+  const progressRef = useRef<any>(null)
+  const progressBarRef = useRef<any>(null)
+
+  const imgLoding = useCallback((e: React.SyntheticEvent<HTMLImageElement>) => {
+    progressBarRef.current.style.display = 'block'
+    const img = e.currentTarget;
+    // 使用URL去重，避免同一图片多次触发
+    if (!loadedUrls.current.has(img.src)) {
+      loadedUrls.current.add(img.src);
+      console.log('实际加载进度:', loadedUrls.current.size, '/', myData.homeData.length);
+      // 更新进度条宽度
+      progressRef.current.style.width = `${loadedUrls.current.size / myData.homeData.length * 100}%`
+      if (loadedUrls.current.size === myData.homeData.length) {
+        progressBarRef.current.style.display = 'none'
+        console.log('所有图片加载完成');
+        imgInitFu();
+      }
+    }
+  }, []);
 
   const [acId, setAcId] = useState(-1)
-
-  // useEffect(() => {
-  //   console.log('----', acId);
-
-  // }, [acId])
-
   // 当前索引
   const [index, setIndex] = useState(-1)
 
@@ -55,7 +66,6 @@ function A1home() {
   useEffect(() => {
     window.getIndexFu = index => {
       setIndex(index)
-      // console.log('当前索引', index)
     }
   }, [])
 
@@ -123,6 +133,7 @@ function A1home() {
           <div id='showcase' className='noselect'>
             {myData.homeData.map((v, i) => (
               <img
+                onLoad={imgLoding}
                 key={v.id}
                 className={classNmaes('cloud9-item', i === index ? 'imgAc' : '')}
                 src={myUrl + v.cover}
@@ -200,6 +211,11 @@ function A1home() {
         onMouseLeave={MouseLeave}
       ></div>
 
+      {/* 进度条 */}
+      <div ref={progressBarRef} className='progressBar'>
+        <div ref={progressRef} className='progress' ></div>
+      </div>
+
       {/* 打开详情 */}
       {open.id ? <A1info info={open} closeFu={() => setOpen({} as HomeDataRow)} /> : null}
     </div>