refactor(background): use event listener instead of onload

1 files changed, 11 insertions, 5 deletions

diff --git a/src/component/MosaicBackground.astro b/src/component/MosaicBackground.astro
index c8e01f5..8c38bcf 100644
--- a/src/component/MosaicBackground.astro
+++ b/src/component/MosaicBackground.astro
@@ -7,7 +7,7 @@ const { height = "400" } = Astro.props;
 </div>
 
 <script>
-  window.onload = () => {
+  window.addEventListener("load", () => {
     // because Astro doesn't support defer
     document.querySelectorAll(".bg").forEach((e) => {
       const children = e.children;
@@ -24,9 +24,15 @@ const { height = "400" } = Astro.props;
         // adding elements
         while (i < children.length && currentWidth <= max) {
           let current = children[i++];
-          let ratio = current.clientWidth / current.clientHeight;
-          line.appendChild(current.cloneNode(true));
-          currentWidth += ratio * height;
+          if (!(current instanceof HTMLScriptElement)) {
+            let ratio = current.clientWidth / current.clientHeight;
+            if (!isNaN(ratio)) {
+              line.appendChild(current.cloneNode(true));
+              currentWidth += ratio * height;
+            } else {
+              console.error("is NaN", current)
+            }
+          }
         }
         // setting height
         let h = (max * height) / currentWidth;
@@ -39,5 +45,5 @@ const { height = "400" } = Astro.props;
       }
       e.replaceChildren(...newChildren);
     });
-  };
+  })
 </script>