添加滚动加载

src/App.tsx

@@ -8,6 +8,7 @@ export default function App() {
   return (
     <div>
       <Masonry />
+      {/* <Image url={url} /> */}
     </div>
   );
 }

src/components/image/index.tsx

@@ -1,33 +1,34 @@
 import { useMemo } from "react";
 import { useEffect, useState, memo } from "react";
-import { getImageSize, getResizeHeight, fallbackUrl } from "./tool";
+import { getImageSize, getResizeHeight, fallbackUrl, ImageSize } from "./tool";
 
 type ImageProps = {
   url: string;
 };
 
 function useLoading(url: string) {
-  const [loading, setLoading] = useState<boolean>(true);
-  const [size, setSize] = useState<{ width: number; height: number }>({
+  const [obj, setObj] = useState<ImageSize & { loading: boolean }>({
     width: 0,
     height: 0,
+    again: false,
+    loading: true,
   });
   useMemo(() => {
-    getImageSize(url).then(({ width, height }) => {
-      setTimeout(() => {
-        setLoading(() => false);
-      }, 500);
-      setSize(() => ({
+    getImageSize(url).then(({ width, height, again }) => {
+      setObj(() => ({
         width: width,
         height: height,
+        again: again,
+        loading: false,
       }));
     });
   }, [url]);
-  return { loading, size };
+  return { loading: obj.loading, size: obj };
 }
 
 export default function Image({ url }: ImageProps) {
   const { loading, size } = useLoading(url);
+  console.log({ loading, size });
   return (
     <div>
       <img

src/components/image/tool.ts

@@ -1,7 +1,8 @@
 import { Once } from "@utils/index";
-type ImageSize = {
+export type ImageSize = {
   width: number;
   height: number;
+  again: boolean;
 };
 /**
  * image组件的工具库
@@ -14,12 +15,14 @@ export function getImageSize(imageSrc: string): Promise<ImageSize> {
       resolve({
         width: image.width,
         height: image.height,
+        again: true,
       });
     }
     image.onload = () =>
       resolve({
         width: image.width,
         height: image.height,
+        again: false,
       });
   });
 }

src/components/masonry/index.tsx

@@ -1,9 +1,35 @@
-import { Masonry } from "masonic";
+import { FC, useState, useEffect } from "react";
+import { Masonry, useInfiniteLoader } from "masonic";
 import Image from "@components/image";
-import { useFakerImages } from "@utils/faker/index";
+import { FetchNewImages, createRandomBlob } from "@utils/faker/index";
 export default function App() {
-  const lists = useFakerImages(20);
-
+  const [lists, setLists] = useState<
+    {
+      image: string;
+      name: string;
+      id: string;
+    }[]
+  >([]);
+  const fetchMoreItems = async (
+    startIndex: number,
+    stopIndex: number,
+    currentItems: any[]
+  ) => {
+    const res = await FetchNewImages(stopIndex - startIndex);
+    // console.log({ startIndex, stopIndex });
+    setLists((lists) => [...lists, ...res]);
+  };
+  useEffect(() => {
+    fetchMoreItems(0, 10, []);
+  }, []);
+  const maybeLoaadMore = useInfiniteLoader(fetchMoreItems, {
+    threshold: 6,
+    isItemLoaded: (index, items) => {
+      return !!items[index];
+    },
+    minimumBatchSize: 12,
+    // totalItems: 30,
+  });
   return (
     <div
       style={{
@@ -18,17 +44,25 @@ export default function App() {
           columnGutter={10}
           maxColumnCount={5}
           render={FakerCard}
-          overscanBy={Infinity}
+          // overscanBy={Infinity}
+          overscanBy={3}
+          onRender={maybeLoaadMore}
         />
       </div>
     </div>
   );
 }
+type CardType = {
+  data: {
+    id: string;
+    image: string;
+    name: string;
+  };
+};
 
-function FakerCard({ data: { id, image, name } }) {
+const FakerCard: FC<CardType> = ({ data: { id, image, name } }) => {
   return (
     <section key={id} className='element-item'>
-      {/* <img src={image} alt='' loading='lazy' /> */}
       <Image url={image} />
       <div className='footer'>
         <p>
@@ -37,4 +71,4 @@ function FakerCard({ data: { id, image, name } }) {
       </div>
     </section>
   );
-}
+};

src/utils/faker/index.ts

@@ -11,7 +11,7 @@ const randomListImageUrls = [
   `https://images.pexels.com/photos/3254555/pexels-photo-3254555.jpeg?auto=compress&cs=tinysrgb&w=600`,
 ];
 
-function createRandomBlob() {
+export function createRandomBlob() {
   return {
     // image: faker.image.imageUrl(640, 480, "cat", true),
     image:
@@ -28,3 +28,17 @@ export function useFakerImages(size: number = 10) {
   }, [size]);
   return _list;
 }
+export function FetchNewImages(size: number = 10): Promise<
+  {
+    image: string;
+    name: string;
+    id: string;
+  }[]
+> {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      const arr = Array.from({ length: size }, () => createRandomBlob());
+      resolve(arr);
+    }, 100 + Math.random() * 100);
+  });
+}