attempt to make image grid performance better

georgebaskervil · Apr 17, 2024 · d7b3718 · d7b3718
1 parent b9c6c4b
commit d7b3718
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 34 deletions.
diff --git a/public/robots.txt b/public/robots.txt
@@ -1,2 +1,2 @@
 User-agent: *
-Disallow: /pictures
+Disallow:
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -147,17 +147,72 @@ const images = getImages();
         See all pictures
           </a>
         </header>
-        <section class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-          {images.slice(0, 4).map((image) => (
-        <div class="border border-neutral rounded-lg shadow-md hover:scale-105 transition-transform duration-300">
-          <picture>
-            <source srcset={`/image-assets/${image}.avif`} type="image/avif">
-            <source srcset={`/image-assets/${image}.webp`} type="image/webp">
-            <img src={`/image-assets/${image}.webp`} alt="Image" class="rounded-lg" />
-          </picture>
-        </div>
-          ))}
-        </section>
+        <style>
+          .image-container {
+            position: relative;
+            overflow: hidden;
+            border-radius: 10px;
+            transition: transform 0.3s ease;
+          }
+
+          .image-container:hover {
+            transform: scale(1.05);
+          }
+
+          .image-container img {
+            width: 100%;
+            height: auto;
+            display: block;
+          }
+        </style>
+        <article class="flex flex-col gap-4">
+          <section class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+            {images.slice(0, 4).map((image) => (
+              <picture class="image-container">
+          <source srcset={`/image-assets/${image}.avif`} type="image/avif">
+          <source srcset={`/image-assets/${image}.webp`} type="image/webp">
+          <img data-src={`/image-assets/${image}.webp`} alt="Image" />
+              </picture>
+            ))}
+          </section>
+        </article>
+            </Layout>
+          </div>
+
+        <script>
+          const imagesToLazyLoad = document.querySelectorAll('img[data-src]');
+
+          const options = {
+            rootMargin: '0px',
+            threshold: 0.1
+          };
+
+          const lazyLoad = (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => {
+            entries.forEach((entry: IntersectionObserverEntry) => {
+              if (entry.isIntersecting) {
+                const image = entry.target;
+                const lazyLoad = (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => {
+                  entries.forEach((entry: IntersectionObserverEntry) => {
+                    if (entry.isIntersecting) {
+                      const image = entry.target as HTMLImageElement;
+                      image.src = image.dataset.src!;
+                      observer.unobserve(image);
+                    }
+                  });
+                };
+                image.removeAttribute('data-src');
+                observer.unobserve(image);
+              }
+            });
+          };
+
+          const observer = new IntersectionObserver(lazyLoad, options);
+
+          imagesToLazyLoad.forEach((image) => {
+            observer.observe(image);
+          });
+        </script>
+
       </article>
     </div>
   </main>

diff --git a/src/pages/pictures.astro b/src/pages/pictures.astro
@@ -6,37 +6,73 @@ import Layout from "../layouts/Layout.astro";
 
 const images = getImages();
 ---
-<Tags />
 <style>
-.background-animation {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(to left,#110819, #000);
-  z-index: -1;
-}
+  .image-container {
+    position: relative;
+    overflow: hidden;
+    border-radius: 10px;
+    transition: transform 0.3s ease;
+  }
+
+  .image-container:hover {
+    transform: scale(1.05);
+  }
+
+  .image-container img {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
 </style>
-<div class="background-animation">
+<Tags />
+<div class="background-animation"></div>
   <Layout>
-
     <h1 class="text-4xl font-bold mb-10">Latest Pictures:</h1>
-
     <article class="flex flex-col gap-4">
       <section class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
         {images.map((image) => (
-          <div class="border border-neutral rounded-lg shadow-md hover:scale-105 transition-transform duration-300">
-            <picture>
-              <source srcset={`/image-assets/${image}.avif`} type="image/avif">
-              <source srcset={`/image-assets/${image}.webp`} type="image/webp">
-              <img src={`/image-assets/${image}.webp`} alt="Image" class="rounded-lg" />
-            </picture>
-          </div>
+          <picture class="image-container">
+            <source srcset={`/image-assets/${image}.avif`} type="image/avif">
+            <source srcset={`/image-assets/${image}.webp`} type="image/webp">
+            <img data-src={`/image-assets/${image}.webp`} alt="Image" />
+          </picture>
         ))}
       </section>
     </article>
   </Layout>
-  </Layout>
 </div>
-<Analytics />
+<Analytics />
+
+<script>
+  const imagesToLazyLoad = document.querySelectorAll('img[data-src]');
+
+  const options = {
+    rootMargin: '0px',
+    threshold: 0.1
+  };
+
+  const lazyLoad = (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => {
+    entries.forEach((entry: IntersectionObserverEntry) => {
+      if (entry.isIntersecting) {
+        const image = entry.target;
+        const lazyLoad = (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => {
+          entries.forEach((entry: IntersectionObserverEntry) => {
+            if (entry.isIntersecting) {
+              const image = entry.target as HTMLImageElement;
+              image.src = image.dataset.src!;
+              observer.unobserve(image);
+            }
+          });
+        };
+        image.removeAttribute('data-src');
+        observer.unobserve(image);
+      }
+    });
+  };
+
+  const observer = new IntersectionObserver(lazyLoad, options);
+
+  imagesToLazyLoad.forEach((image) => {
+    observer.observe(image);
+  });
+</script>