From 76f9be56af7100d7d1bd74e88756c4dca768ce61 Mon Sep 17 00:00:00 2001
From: amgno <ale@magno.me>
Date: Wed, 25 Sep 2024 15:27:56 +0200
Subject: [PATCH] new lazyload for images

---
 project.html | 29 ++++++++++++++++++++++++++++-
 readme.md    |  9 ++++-----
 2 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/project.html b/project.html
index 9bb1db3..7364732 100644
--- a/project.html
+++ b/project.html
@@ -31,6 +31,15 @@
             #new-img-div {
                 column-count: 1;
             }
+
+            .lazy-image {
+                opacity: 0;
+                transition: opacity 0.3s;
+            }
+
+            .lazy-image[src] {
+                opacity: 1;
+            }
         }
     </style>
     <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
@@ -121,9 +130,11 @@
             if (project.images && project.images.length > 0) {
                 project.images.forEach((imageUrl) => {
                     const img = document.createElement('img');
-                    img.src = imageUrl;
+                    img.dataset.src = imageUrl; // Use data-src instead of src
+                    img.className = 'lazy-image'; // Add a class for lazy loading
                     imageContainer.appendChild(img);
                 });
+                lazyLoadImages(); // Call a function to handle lazy loading
             } else {
                 console.log("no images, removing div");
                 document.getElementById('image-gallery').style.display = 'none';
@@ -139,6 +150,22 @@
             document.getElementById('project-content').innerHTML = '<p>Project not found.</p>';
         }
     });
+
+    function lazyLoadImages() {
+        const lazyImages = document.querySelectorAll('img.lazy-image');
+        const imageObserver = new IntersectionObserver((entries, observer) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    const img = entry.target;
+                    img.src = img.dataset.src;
+                    img.classList.remove('lazy-image');
+                    imageObserver.unobserve(img);
+                }
+            });
+        });
+
+        lazyImages.forEach(img => imageObserver.observe(img));
+    }
 </script>
 
 <script src="./transition.js"></script>
diff --git a/readme.md b/readme.md
index 8085dd0..5a9ff61 100644
--- a/readme.md
+++ b/readme.md
@@ -3,13 +3,12 @@
 ## List to remind me of things to do
 
 ## In progress
-• Lazy load images <br> 
-• Add a progress bar for uploading images <br>
 • Fix the size of buttons on works for mobile view <br>
-• fix layout of the admin dashboard <br>
 • After deleting a project, and trying to open a existing one it gives an error <br>
 
-
 ## Done
 
-• Fix delete function on image manager <br>
+✅ Fix delete function on image manager <br>
+✅ Add a progress bar for uploading images <br>
+✅ fix layout of the admin dashboard <br>
+✅ Lazy load images <br> 
\ No newline at end of file