Preload images in the editor

Anki Suggestions
1

I’m a bit late with it, but if I can, I’m not the only one who’s experiencing it and it’s important enough, I’d like to make a suggestion to preload the images in the editor by delaying the editor for 25-100 ms (or maybe something else) in order to prevent the cumulative layout shift for cards that include small and light images.

https://www.smashingmagazine.com/2021/06/how-to-fix-cumulative-layout-shift-issues/

uDnrxhn.png799×318 64.3 KB

Here’s a small add-on that tries to make it less noticeable - https://ankiweb.net/shared/info/1254315341

Here’s the code https://gist.github.com/kelciour/d86e60c775210dad7ba90dff9fec4da6 that relies on QTimer to preload the images and delay loading the note for about 25-150 ms.

Here’s how it looks on my PC.

Here’s after delaying the editor for about 25-150 ms to preload the images.

Thank you.

3 Likes
2

I see the same thing as you do on my debian linux (stable) machine regarding “flashing” / layout shifts.

My PC isn’t the most powerful out there but does have an SSD and Graphics Card, along with a ton of RAM and decent enough CPU.

Though I can see layout shifts for cards without images as well. Maybe related to the amount of content in a field?

3

@kelciour Can you test with Shift editor control to TypeScript by abdnh · Pull Request #4029 · ankitects/anki · GitHub?

4

Thank you! That’s reassuring!

Anki 2.0 used to display small images very quick and smoothly (and not so well large images), but Qt WebKit was deprecated and Qt WebEngine no longer waits for images.

Though I can see layout shifts for cards without images as well. Maybe related to the amount of content in a field?

I don’t know and I don’t have any suggestions aside from temporarily disabling all addons and recording the screen to replay the video later with mpv in slow motion or frame by frame with . and , (mpv.io) to see what’s going on.

5

The Ultimate Geography deck looks a bit better for me. Some cards might display without flashing and some cards might still flash from time to time. But there’s no much difference for Great Works of Art that includes a bit heavier and larger images.

There could also be a bug somewhere. While quickly browsing the cards, one of the fields was overwritten with a different image from the same field but from a different note, but I don’t know how to reproduce it reliably. I just clicked a few cards, pressed up and down, page up and page down a few times without much delay for about 15-30 seconds.

Before:

Cuba		Havana			"<img src=""ug-flag-cuba.svg"">"	Puerto Rico (blue triangle, red stripes)	"<img src=""ug-map-cuba.png"">"	UG::Caribbean UG::North_America UG::Sovereign_State
Dominican Republic		Santo Domingo			"<img src=""ug-flag-dominican_republic.svg"">"		"<img src=""ug-map-dominican_republic.png"">"	UG::Caribbean UG::North_America UG::Sovereign_State

After (“ug-map-dominican_republic.png” was replaced with “ug-map-cuba.png”):

Cuba		Havana			"<img src=""ug-flag-cuba.svg"">"	Puerto Rico (blue triangle, red stripes)	"<img src=""ug-map-cuba.png"">"	UG::Caribbean UG::North_America UG::Sovereign_State
Dominican Republic		Santo Domingo			"<img src=""ug-flag-dominican_republic.svg"">"		"<img src=""ug-map-cuba.png"">"	UG::Caribbean UG::North_America UG::Sovereign_State

Here’s another example. The note was marked as recently modified and “ug-map-east_siberian_sea.png” was overwritten with “ug-map-sea_of_japan.png”.

image
image1646×784 91.9 KB

1 Like