uugh it looks like browsers don't load images that are display: none so when i swap images around using CSS i get this awful flicker
i've tried a couple ways to get around it but no dice yet
@monorail one solution is to download the images via javascript ahead of time (calling .decode() on the image element for example)
there are other ways i'm pretty sure but that's the easiest to explain / implement
@Lady just like this?
for (e of document.getElementById("free-result").children) {
e.decode();
}
(the elements in the loop are all img elements, and every img element on the page shares a source with one of the ones in the loop)
because i have tried that and it's still flickering :(
@monorail it looks like there's a decoding="sync" html attribute too
but yeah that should work :(
maybe check the network pane in the web inspector? you should be able to check when the images actually get requested/downloaded there
the other solution is to make a sprite sheet (all the images in one file) and to display the image as a background on an element using background-clip to only show the part you want. that's harder to do but you definitely won't get any flickering there, since it's all the same image
