diff --git a/qt/aqt/data/web/js/reviewer.ts b/qt/aqt/data/web/js/reviewer.ts index 4ed0aa0c6..a9bdf318f 100644 --- a/qt/aqt/data/web/js/reviewer.ts +++ b/qt/aqt/data/web/js/reviewer.ts @@ -73,6 +73,9 @@ async function _updateQA( }) .catch(renderError("MathJax")); + // defer display for up to 100ms to allow images to load + await Promise.race([allImagesLoaded(), new Promise((r) => setTimeout(r, 100))]); + // and reveal when processing is done await qa.fadeTo(fadeTime, 1).promise(); await _runHook(onShownHook); @@ -111,11 +114,9 @@ function _showAnswer(a: string, bodyclass: string): void { document.body.className = bodyclass; } - // scroll to answer? - var e = $("#answer"); - if (e[0]) { - e[0].scrollIntoView(); - } + // avoid scrolling to the answer until images load, even if it + // takes more than 100ms + allImagesLoaded().then(scrollToAnswer); }, function () {} ) @@ -162,3 +163,23 @@ function _emulateMobile(enabled: boolean): void { list.remove("mobile"); } } + +function allImagesLoaded(): Promise { + return Promise.all( + Array.from(document.getElementsByTagName("img")).map(imageLoaded) + ); +} + +function imageLoaded(img: HTMLImageElement): Promise { + if (img.complete) { + return; + } + return new Promise((resolve) => { + img.addEventListener("load", () => resolve()); + img.addEventListener("error", () => resolve()); + }); +} + +function scrollToAnswer(): void { + document.getElementById("answer")?.scrollIntoView(); +}