Maybe preload images (#2165)

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

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 {