From 0bbb4573b2381bb98c9b27b52fe3f01a6884c6c5 Mon Sep 17 00:00:00 2001
From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com>
Date: Sat, 18 May 2024 18:52:54 +0100
Subject: [PATCH] Revert setTimeout for images

Reduces instances of cached images fading in by giving
the browser a bit more time to load them
---
 internal/assets/static/main.js | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/internal/assets/static/main.js b/internal/assets/static/main.js
index a5c9987..fcc2043 100644
--- a/internal/assets/static/main.js
+++ b/internal/assets/static/main.js
@@ -161,20 +161,22 @@ function setupLazyImages() {
     }
 
     afterContentReady(() => {
-        for (let i = 0; i < images.length; i++) {
-            const image = images[i];
+        setTimeout(() => {
+            for (let i = 0; i < images.length; i++) {
+                const image = images[i];
 
-            if (image.complete) {
-                image.classList.add("cached");
-                setTimeout(() => imageFinishedTransition(image), 1);
-            } else {
-                // TODO: also handle error event
-                image.addEventListener("load", () => {
-                    image.classList.add("loaded");
-                    setTimeout(() => imageFinishedTransition(image), 400);
-                });
+                if (image.complete) {
+                    image.classList.add("cached");
+                    setTimeout(() => imageFinishedTransition(image), 1);
+                } else {
+                    // TODO: also handle error event
+                    image.addEventListener("load", () => {
+                        image.classList.add("loaded");
+                        setTimeout(() => imageFinishedTransition(image), 400);
+                    });
+                }
             }
-        }
+        }, 1);
     });
 }
 
@@ -347,11 +349,11 @@ async function setupPage() {
     pageContentElement.innerHTML = pageContent;
 
     try {
-        setupLazyImages();
         setupCarousels();
         setupCollapsibleLists();
         setupCollapsibleGrids();
         setupDynamicRelativeTime();
+        setupLazyImages();
     } finally {
         pageElement.classList.add("content-ready");