[fix] 图片加载顺序不对的问题

TorzoClub · Jan 7, 2024 · 568c3b8 · 568c3b8
1 parent 1c60363
commit 568c3b8
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 34 deletions.
diff --git a/front/src/components/PhotoBox/index.tsx b/front/src/components/PhotoBox/index.tsx
@@ -86,7 +86,8 @@ export const PhotoBoxDimension = forwardRef< DimensionUnknown, Props>((props, re
 })
 
 const PhotoBox = forwardRef<HTMLDivElement, Props>((props, ref) => {
-  const { type, vertial_gutter, box_width, photo, hideMember, avatar, desc, style, vote_button_status } = props
+  const { type, vertial_gutter, box_width, photo, hideMember,
+         avatar, desc, style, vote_button_status } = props
 
   const [thumb_loaded, thumb] = useQueueload(photo.thumb)
   const [avatar_loaded, avatarThumb] = useQueueload(avatar?.thumb)
@@ -99,8 +100,8 @@ const PhotoBox = forwardRef<HTMLDivElement, Props>((props, ref) => {
 
   const coverFrameStyle = useMemo(() => ({
     height,
-    background: avatar_loaded ? 'white' : ''
-  }), [avatar_loaded, height])
+    background: thumb_loaded ? 'white' : ''
+  }), [thumb_loaded, height])
 
   const show_desc = Boolean(desc.trim().length)
   const show_bottom_block = !hideMember || show_desc
@@ -113,7 +114,8 @@ const PhotoBox = forwardRef<HTMLDivElement, Props>((props, ref) => {
       className={`image-box-wrapper ${(type === 'compact') && 'compact'} ${none_bottom_block ? 'none-bottom-block' : 'has-bottom-block'}`}
       style={{
         '--vertical-gutter': `${vertial_gutter}px`,
-        width: `calc(${box_width}px)`, ...(style ?? {})
+        width: `calc(${box_width}px)`,
+        ...(style ?? {})
       } as React.CSSProperties}
     >
       <div className="image-box">

diff --git a/front/src/layouts/GalleryHome/index.tsx b/front/src/layouts/GalleryHome/index.tsx
@@ -50,38 +50,41 @@ function usePhotoLoadingPriority(
   }
 
   const resort = useCallback(function _resortHandler() {
-    const in_screen_photos = photo_list.map(photo => {
-      const photo_el = document.getElementById(id('PHOTO', photo.id))
-      if (!photo_el) { return }
-      const bounding = photo_el.getBoundingClientRect()
-      if (
-        (bounding.y > (0 - bounding.height)) &&
-        (bounding.y < window.innerHeight)
-      ) {
-        return { photo, bounding }
-      } else {
-        return
-      }
-    }).filter(p => p) as { photo: Photo, bounding: DOMRect }[]
+    requestAnimationFrame(() => {
+      const in_screen_photos = photo_list.map(photo => {
+        const photo_el = document.getElementById(id('PHOTO', photo.id))
+        if (!photo_el) { return }
+        const bounding = photo_el.getBoundingClientRect()
+        if (
+          (bounding.y > (0 - bounding.height)) &&
+          (bounding.y < window.innerHeight)
+        ) {
+          console.log(bounding, photo_el)
+          return { photo, bounding }
+        } else {
+          return null
+        }
+      }).filter(p => p) as { photo: Photo, bounding: DOMRect }[]
 
-    const sorted = in_screen_photos.sort((a, b) => {
-      return a.bounding.y > b.bounding.y ? 1 : -1
-    })
+      const sorted = in_screen_photos.sort((a, b) => {
+        return a.bounding.y > b.bounding.y ? 1 : -1
+      })
+
+      const all_tasks = getGlobalQueue()
+      setGlobalQueue(
+        all_tasks.map((t, idx) => {
+          return { ...t, priority: all_tasks.length - idx }
+        })
+      )
 
-    const all_tasks = getGlobalQueue()
-    setGlobalQueue(
-      all_tasks.map((t, idx) => {
-        return { ...t, priority: all_tasks.length - idx }
+      sorted.forEach(({ photo }, idx) => {
+        const src = id_src_map.get(photo.id)
+        if (!src) return
+        globalQueueLoad(src, 10000 - idx)
+        if (photo.member) {
+          globalQueueLoad(photo.member.avatar_thumb_url, 5000 - idx)
+        }
       })
-    )
-
-    sorted.forEach(({ photo }, idx) => {
-      const src = id_src_map.get(photo.id)
-      if (!src) return
-      globalQueueLoad(src, 10000 - idx)
-      if (photo.member) {
-        globalQueueLoad(photo.member.avatar_thumb_url, 5000 - idx)
-      }
     })
   }, [id_src_map, photo_list])
 
@@ -146,13 +149,17 @@ export default () => {
     return (active === null) ? [] : active.photos.map(p => p.id)
   }, [active])
 
-  usePhotoLoadingPriority(
+  const resort = usePhotoLoadingPriority(
     useMemo(() => [
       ...(active ? active.photos : []),
       ...list.map(g => g.photos).flat(),
     ], [active, list])
   )
 
+  useEffect(() => {
+    resort()
+  }, [resort])
+
   const [imageDetail, setImageDetail] = useState<Detail | null>(null)
   const [currentQQNum, setCurrentQQNum] = useState(0)