瀏覽代碼

Revert setTimeout for images

Reduces instances of cached images fading in by giving
the browser a bit more time to load them
Svilen Markov 1 年之前
父節點
當前提交
0bbb4573b2
共有 1 個文件被更改,包括 15 次插入13 次删除
  1. 15 13
      internal/assets/static/main.js

+ 15 - 13
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");