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 abaa550e8..aa0eb61b7 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,37 @@ export const GridItem = (props: { obj: StoreObj; index: number }) => {
   const { pushHref, to } = useRouter()
   const { openWithDoubleClick, toggleWithClick, restoreSelectionCache } =
     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()
+        if (loadTimeout) clearTimeout(loadTimeout)
+      })
+    }
+  })
   return (
     <Motion.div
+      ref={ref}
       initial={{ opacity: 0, scale: 0.9 }}
       animate={{ opacity: 1, scale: 1 }}
       transition={{ duration: 0.2 }}
@@ -115,7 +144,10 @@ export const GridItem = (props: { obj: StoreObj; index: number }) => {
               }}
             />
           </Show>
-          <Show when={props.obj.thumb} fallback={objIcon}>
+          <Show
+            when={props.obj.thumb && (canLoad() || loaded())}
+            fallback={objIcon}
+          >
             <ImageWithError
               maxH="$full"
               maxW="$full"
@@ -125,6 +157,7 @@ export const GridItem = (props: { obj: StoreObj; index: number }) => {
               fallbackErr={objIcon}
               src={props.obj.thumb}
               loading="lazy"
+              onLoad={() => setLoaded(true)}
             />
           </Show>
         </Center>