fix: lazy load portraits

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;
-}

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;
+      };
+  });
+};