From 3973f27ee43d44a4e2182ceba041d50147a9aa44 Mon Sep 17 00:00:00 2001
From: kelciour <kelciour@gmail.com>
Date: Fri, 4 Nov 2022 03:07:51 +0300
Subject: [PATCH] Maybe preload images (#2165)

---
 ts/reviewer/images.ts | 14 ++++++++++++++
 ts/reviewer/index.ts  |  5 ++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/ts/reviewer/images.ts b/ts/reviewer/images.ts
index ce08749f0..38eb983b8 100644
--- a/ts/reviewer/images.ts
+++ b/ts/reviewer/images.ts
@@ -49,3 +49,17 @@ export function preloadAnswerImages(qHtml: string, aHtml: string): void {
         diff.forEach((src) => injectPreloadLink(src, "image"));
     }
 }
+
+export async function maybePreloadImages(html: string): Promise<void> {
+    const srcs = extractImageSrcs(html);
+    await Promise.race([
+        Promise.all(
+            srcs.map((src) => {
+                const img = new Image();
+                img.src = src;
+                return imageLoaded(img);
+            }),
+        ),
+        new Promise((r) => setTimeout(r, 100)),
+    ]);
+}
diff --git a/ts/reviewer/index.ts b/ts/reviewer/index.ts
index 83cfd0cba..10cb662c6 100644
--- a/ts/reviewer/index.ts
+++ b/ts/reviewer/index.ts
@@ -16,7 +16,7 @@ globalThis.anki.mutateNextCardStates = mutateNextCardStates;
 
 import { bridgeCommand } from "../lib/bridgecommand";
 import { maybePreloadExternalCss } from "./css";
-import { allImagesLoaded, preloadAnswerImages } from "./images";
+import { allImagesLoaded, maybePreloadImages, preloadAnswerImages } from "./images";
 
 declare const MathJax: any;
 
@@ -133,6 +133,9 @@ export async function _updateQA(
     // prevent flash of unstyled content when external css used
     await maybePreloadExternalCss(html);
 
+    // prevent flickering & layout shift on image load
+    await maybePreloadImages(html);
+
     qa.style.opacity = "0";
 
     try {