From 43c862fbfd7511ffa057c4ae5e63fe191739d3d9 Mon Sep 17 00:00:00 2001
From: Max <jim-x@web.de>
Date: Mon, 20 Nov 2023 16:51:33 +0100
Subject: [PATCH] fix: lazy load portraits

---
 src/routes/global.css |  5 -----
 static/lazy.js        | 29 +++++++++++++++--------------
 2 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/src/routes/global.css b/src/routes/global.css
index d8b5645..97f2424 100644
--- a/src/routes/global.css
+++ b/src/routes/global.css
@@ -25,8 +25,3 @@ img.lazy-image {
   opacity: 0;
   transition: opacity 0.3s ease;
 }
-
-img.lazy-image.loaded {
-  opacity: 1;
-  z-index:-1;
-}
diff --git a/static/lazy.js b/static/lazy.js
index 9f008c2..9f8e4e6 100644
--- a/static/lazy.js
+++ b/static/lazy.js
@@ -1,16 +1,17 @@
-window.onload = function(){
+window.onload = function () {
+  // Get all <img> elements with loading="lazy"
+  var lazyImages = document.querySelectorAll('img[loading="lazy"]');
 
-  var lazyImages = [...document.querySelectorAll("img[loading='lazy']")];
+  // Loop through each image and apply the fade-in effect
+  lazyImages.forEach(function (lazyImage) {
+      lazyImage.style.opacity = 0;
+      lazyImage.classList.add("lazy-image")
 
-  for (let i = 0; i < lazyImages.length; i++) {
-    var element = lazyImages[i];
-    element.classList.add("lazy-image")
-    element.onload = function(){
-      element.classList.add("loaded");
-    }
-    element.addEventListener("load", function(){
-      element.classList.add("loaded");
-    })
-  }
-
-}
+      // Create an image element to check when it's loaded
+      var img = new Image();
+      img.src = lazyImage.src;
+      img.onload = function () {
+          lazyImage.style.opacity = 1;
+      };
+  });
+};