fix: fix isLazy card

imagine10255 · Sep 15, 2023 · e36d663 · e36d663
1 parent e2912f0
commit e36d663
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 5 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -75,7 +75,7 @@ const examples: Record<EExampleCode, () => JSX.Element> = {
 };
 
 function App() {
-    const [exampleKey, setExampleItem] = useState<EExampleCode>(EExampleCode.lazyImage);
+    const [exampleKey, setExampleItem] = useState<EExampleCode>(EExampleCode.lazyCard);
     const Comp = examples[exampleKey];
 
 

diff --git a/src/BearSlideCard.tsx b/src/BearSlideCard.tsx
@@ -38,7 +38,7 @@ const BearSlideCard = ({
         data-lazy-src={slide.isLazy && status !== ELoadStatus.done ? bgUrl: undefined}
         style={{
             ...style,
-            backgroundImage: (!slide.isLazy && imageUrl) ? `url(${imageUrl})` :undefined,
+            backgroundImage: imageUrl ? `url(${imageUrl})` :undefined,
             backgroundSize: bgSize,
         }}
     >

diff --git a/src/hook/useLazyLoadBg.ts b/src/hook/useLazyLoadBg.ts
@@ -39,12 +39,15 @@ const useLazyLoadBg = ({isLazy, imageUrl}: IUseLazyLoadProps) => {
             if (entry.isIntersecting) {
                 const el = entry.target as HTMLDivElement;
 
-                const img = new Image();
                 if(status === ELoadStatus.ready){
+                    const img = new Image();
                     setStatus(ELoadStatus.loading);
 
                     img.src = el.dataset.lazySrc;
-                    img.onload = () => setStatus(ELoadStatus.done);
+                    img.onload = () => {
+                        setStatus(ELoadStatus.done);
+                        setDoneImageUrl(img.src);
+                    };
                     img.onerror = () => setStatus(ELoadStatus.fail);
                 }
                 observer.unobserve(el);

diff --git a/src/hook/useLazyLoadImage.ts b/src/hook/useLazyLoadImage.ts
@@ -33,8 +33,8 @@ const useLazyLoadImage = ({isLazy, imageUrl}: IUseLazyLoadProps) => {
         for (let entry of entries) {
             if (entry.isIntersecting) {
                 // 監視目標進入畫面
-                const img = entry.target as HTMLImageElement;
 
+                const img = entry.target as HTMLImageElement;
                 if(status === ELoadStatus.ready){
                     setStatus(ELoadStatus.loading);