diff --git a/src/client/page/gallery.tsx b/src/client/page/gallery.tsx
index 16fbd53..97da843 100644
--- a/src/client/page/gallery.tsx
+++ b/src/client/page/gallery.tsx
@@ -7,6 +7,7 @@ import { toQueryString } from '../accessor/util';
 
 import { useLocation } from 'react-router-dom';
 import { QueryStringToMap } from '../accessor/util';
+import { useIsElementInViewport } from './reader/reader';
 
 
 
@@ -22,6 +23,14 @@ export const GalleryInfo = (props: GalleryProp) => {
     const [state, setState] = useState<GalleryState>({ documents: undefined });
     const [error, setError] = useState<string | null>(null);
     const [loadAll, setLoadAll] = useState(false);
+    const {elementRef, isVisible: isLoadVisible} = useIsElementInViewport<HTMLButtonElement>({});
+
+    useEffect(()=>{
+        if(isLoadVisible && (!loadAll) && (state.documents != undefined)){
+            loadMore();
+        }
+    },[isLoadVisible]);
+
     useEffect(() => {
         const abortController = new AbortController();
         console.log('load first',props.option);
@@ -71,30 +80,31 @@ export const GalleryInfo = (props: GalleryProp) => {
                     justifyContent: "center",
                     textAlign:"center"
                 }}>{state.documents ? state.documents.length : "null"} loaded...</Typography>
-                <Button onClick={()=>loadMore()} disabled={loadAll}>{loadAll ? "Load All" : "Load More"}</Button>
+                <Button onClick={()=>loadMore()} disabled={loadAll} ref={elementRef} >{loadAll ? "Load All" : "Load More"}</Button>
             </Box>
         );
-        function loadMore() {
-            let option = {...props.option};
-            if(state.documents === undefined || state.documents.length === 0){
-                console.log("loadall");
-                setLoadAll(true);
-                return;
-            }
-            const prev_documents = state.documents;
-            option.cursor = prev_documents[prev_documents.length - 1].id;
-            console.log("load more", option);
-            const load = (async () => {
-                const c = await ContentAccessor.findList(option);
-                if (c.length === 0) {
-                    setLoadAll(true);
-                }
-                else{
-                    setState({ documents: [...prev_documents, ...c] });
-                }
-            });
-            load();
+    }
+    function loadMore() {
+        let option = {...props.option};
+        console.log(elementRef)
+        if(state.documents === undefined || state.documents.length === 0){
+            console.log("loadall");
+            setLoadAll(true);
+            return;
         }
+        const prev_documents = state.documents;
+        option.cursor = prev_documents[prev_documents.length - 1].id;
+        console.log("load more", option);
+        const load = (async () => {
+            const c = await ContentAccessor.findList(option);
+            if (c.length === 0) {
+                setLoadAll(true);
+            }
+            else{
+                setState({ documents: [...prev_documents, ...c] });
+            }
+        });
+        load();
     }
 }