How to "pre-load" the <iframe> HTML tags in the BACK of cards

because cache is usually not meant to be kept forever (at least for web browsers)

My idea was is that you put an invisible frame in the front of the card, and a visible one in the back. This way it has to be cached for a few seconds only.

By the way, It seems that Anki does not support catching…

I just tried and it does. The cache does not persist between runs, but definitely works between front and back. How did you make it invisible? display: none may prevent the engine from loading elements. I put this in the front of my card:

<iframe src="https://emoji.discourse-cdn.com/twitter/smiley.png?v=12" style="opacity: 0"></iframe>

And in the back I put the same but without style. After pressing answer, Inspector shows this:

(Image was requested thrice because my back includes my front)

Note that if you don’t use iframe but a direct link to an image in the back of your card, Anki prefetches it when you open the front. How wise of Anki!

With iframe, while the trick above works, the page has to-rerender. It will also re-run all the javascript, etc. Might be slow even though it doesn’t use data. I wonder if there’s a way to save the element while in front, and reattach when in the back.

4 Likes