实现加载图片的时候延迟500ms 防止快速划过不关注的地方也在加载阻塞滑到的地方

Author: zhlhlf

src/components/ImageWithError.tsx

@@ -4,13 +4,15 @@ import { createSignal, JSXElement, Show } from "solid-js"
 export const ImageWithError = <C extends ElementType = "img">(
   props: ImageProps<C> & {
     fallbackErr?: JSXElement
+    onLoad?: () => void
   },
 ) => {
   const [err, setErr] = createSignal(false)
   return (
     <Show when={!err()} fallback={props.fallbackErr}>
       <Image
         {...props}
+        onLoad={props.onLoad}
         onError={() => {
           setErr(true)
         }}

src/pages/home/folder/GridItem.tsx

@@ -29,18 +29,30 @@ export const GridItem = (props: { obj: StoreObj; index: number }) => {
     useSelectWithMouse()
 
   const [isVisible, setIsVisible] = createSignal(false)
+  const [loaded, setLoaded] = createSignal(false)
+  const [canLoad, setCanLoad] = createSignal(false)
   let ref: HTMLDivElement | undefined
+  let loadTimeout: number | undefined
 
   onMount(() => {
     if (ref) {
       const observer = new IntersectionObserver(
         ([entry]) => {
+          if (entry.isIntersecting) {
+            loadTimeout = setTimeout(() => setCanLoad(true), 500)
+          } else {
+            if (loadTimeout) clearTimeout(loadTimeout)
+            setCanLoad(false)
+          }
           setIsVisible(entry.isIntersecting)
         },
         { rootMargin: "50px" },
       )
       observer.observe(ref)
-      onCleanup(() => observer.disconnect())
+      onCleanup(() => {
+        observer.disconnect()
+        if (loadTimeout) clearTimeout(loadTimeout)
+      })
     }
   })
   return (
@@ -132,7 +144,10 @@ export const GridItem = (props: { obj: StoreObj; index: number }) => {
               }}
             />
           </Show>
-          <Show when={props.obj.thumb && isVisible()} fallback={objIcon}>
+          <Show
+            when={props.obj.thumb && (canLoad() || loaded())}
+            fallback={objIcon}
+          >
             <ImageWithError
               maxH="$full"
               maxW="$full"
@@ -142,6 +157,7 @@ export const GridItem = (props: { obj: StoreObj; index: number }) => {
               fallbackErr={objIcon}
               src={props.obj.thumb}
               loading="lazy"
+              onLoad={() => setLoaded(true)}
             />
           </Show>
         </Center>