Upload result.html

result.html

@@ -323,9 +323,22 @@
     }
   }
 
-  function loadImg(imgId, skId, b64) {    const img=document.getElementById(imgId), sk=document.getElementById(skId);
-    img.onload = ()=>{ sk.style.display='none'; img.style.display='block'; };
-    img.src = 'data:image/jpeg;base64,'+b64;
+  function loadImg(imgId, skId, b64, onDone) {
+    const img = document.getElementById(imgId);
+    const sk  = document.getElementById(skId);
+    // set onload BEFORE src เพื่อไม่ให้ miss event
+    img.onload = () => {
+      if (sk) sk.style.display = 'none';
+      img.style.display = 'block';
+      if (onDone) requestAnimationFrame(() => requestAnimationFrame(onDone));
+    };
+    img.src = 'data:image/jpeg;base64,' + b64;
+    // กรณีที่ browser cache ภาพไว้แล้ว onload จะไม่ fire → เช็คด้วย complete
+    if (img.complete && img.naturalWidth > 0) {
+      if (sk) sk.style.display = 'none';
+      img.style.display = 'block';
+      if (onDone) requestAnimationFrame(() => requestAnimationFrame(onDone));
+    }
   }
 
   // ── Lightbox (ดูรูปเต็ม) ──
@@ -366,14 +379,8 @@
     try {
       resultData = JSON.parse(raw);
       document.getElementById('main-content').style.display='flex';
-      loadImg('orig-img','sk-orig', resultData.orig_b64);
-      loadImg('result-img','sk-result', resultData.orig_b64);
-      document.getElementById('result-img').onload = () => {
-        // รอให้ browser วาดภาพลง DOM จริงๆ ก่อน
-        requestAnimationFrame(() => {
-          requestAnimationFrame(() => initSlider(resultData));
-        });
-      };
+      loadImg('orig-img', 'sk-orig', resultData.orig_b64);
+      loadImg('result-img', 'sk-result', resultData.orig_b64, () => initSlider(resultData));
       applyLang(currentLang);
       renderDynamic();
     } catch(e) {