From 3e693a1fbf1556b4b5979bb0ea69202431753f01 Mon Sep 17 00:00:00 2001
From: zhlhlf <zhlhlf@gmail.com>
Date: Fri, 26 Dec 2025 20:37:02 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E5=AE=9E=E7=8E=B0Grid=20View=20=E6=A0=B9?=
 =?UTF-8?q?=E6=8D=AE=E8=A7=86=E9=87=8E=E4=BD=8D=E7=BD=AE=E5=8A=A0=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/home/folder/GridItem.tsx | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/pages/home/folder/GridItem.tsx b/src/pages/home/folder/GridItem.tsx
index abaa550e8..ac5607716 100644
--- a/src/pages/home/folder/GridItem.tsx
+++ b/src/pages/home/folder/GridItem.tsx
@@ -1,7 +1,7 @@
 import { Center, VStack, Icon, Text } from "@hope-ui/solid"
 import { Motion } from "solid-motionone"
 import { useContextMenu } from "solid-contextmenu"
-import { batch, Show } from "solid-js"
+import { batch, Show, createSignal, onMount, onCleanup } from "solid-js"
 import { CenterLoading, LinkWithPush, ImageWithError } from "~/components"
 import { usePath, useRouter, useUtil } from "~/hooks"
 import { checkboxOpen, getMainColor, local, selectIndex } from "~/store"
@@ -27,8 +27,25 @@ export const GridItem = (props: { obj: StoreObj; index: number }) => {
   const { pushHref, to } = useRouter()
   const { openWithDoubleClick, toggleWithClick, restoreSelectionCache } =
     useSelectWithMouse()
+
+  const [isVisible, setIsVisible] = createSignal(false)
+  let ref: HTMLDivElement | undefined
+
+  onMount(() => {
+    if (ref) {
+      const observer = new IntersectionObserver(
+        ([entry]) => {
+          setIsVisible(entry.isIntersecting)
+        },
+        { rootMargin: "50px" },
+      )
+      observer.observe(ref)
+      onCleanup(() => observer.disconnect())
+    }
+  })
   return (
     <Motion.div
+      ref={ref}
       initial={{ opacity: 0, scale: 0.9 }}
       animate={{ opacity: 1, scale: 1 }}
       transition={{ duration: 0.2 }}
@@ -115,7 +132,7 @@ export const GridItem = (props: { obj: StoreObj; index: number }) => {
               }}
             />
           </Show>
-          <Show when={props.obj.thumb} fallback={objIcon}>
+          <Show when={props.obj.thumb && isVisible()} fallback={objIcon}>
             <ImageWithError
               maxH="$full"
               maxW="$full"

From b683c000156b8c1c53d3a32f22135f579171a8b2 Mon Sep 17 00:00:00 2001
From: zhlhlf <zhlhlf@gmail.com>
Date: Fri, 26 Dec 2025 20:53:13 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E7=9A=84=E6=97=B6=E5=80=99=E5=BB=B6=E8=BF=9F?=
 =?UTF-8?q?500ms=20=20=E9=98=B2=E6=AD=A2=E5=BF=AB=E9=80=9F=E5=88=92?=
 =?UTF-8?q?=E8=BF=87=E4=B8=8D=E5=85=B3=E6=B3=A8=E7=9A=84=E5=9C=B0=E6=96=B9?=
 =?UTF-8?q?=E4=B9=9F=E5=9C=A8=E5=8A=A0=E8=BD=BD=E9=98=BB=E5=A1=9E=E6=BB=91?=
 =?UTF-8?q?=E5=88=B0=E7=9A=84=E5=9C=B0=E6=96=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ImageWithError.tsx  |  2 ++
 src/pages/home/folder/GridItem.tsx | 20 ++++++++++++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/ImageWithError.tsx b/src/components/ImageWithError.tsx
index a5b91675e..3619b3786 100644
--- a/src/components/ImageWithError.tsx
+++ b/src/components/ImageWithError.tsx
@@ -4,6 +4,7 @@ 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)
@@ -11,6 +12,7 @@ export const ImageWithError = <C extends ElementType = "img">(
     <Show when={!err()} fallback={props.fallbackErr}>
       <Image
         {...props}
+        onLoad={props.onLoad}
         onError={() => {
           setErr(true)
         }}
diff --git a/src/pages/home/folder/GridItem.tsx b/src/pages/home/folder/GridItem.tsx
index ac5607716..aa0eb61b7 100644
--- a/src/pages/home/folder/GridItem.tsx
+++ b/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>