I have an app which can switch between views on different subsets of a medium number of images (well below an acceptable amount to cache). I'm finding that when switching views, the browser sometimes asks the server if images are up-to-date before using the cached copy. The logic for doing so seems complex, and though I am interested in it, that isn't the focus of the question.
What ends up happening is the server sends back 304 (not modified), but the delay causes image pop-in. The effect is something like changing these cats:
It's no problem for me to keep all of my images loaded. It seems that this used to be possible with display: none but is no longer. However, hidden seems to do the trick. Look at those smooth cats now!
So, what is the mid-2022 way to do this? Or am I being completely wrongheaded about the whole thing and should be thinking in an entirely different way about the problem?
EDIT: This question has been floated as containing much useful information, and while that's definitely true, I wanted to highlight how the linked sandbox is addressing the problem, namely:
// webpack/react style image import
import cat001 from "./images/cat001.png";
import cat002 from "./images/cat002.png";
...
const CATS = [ cat001, cat002, ... ];
...
function App() {
return (
<>
{/* Keep all the cats loaded all the time! */}
{CATS.map((cat) => (
<img key={cat} src={cat} alt="a cat" hidden />
))}
...
</>
);
}
This seems like a nice JSX/TSX solution, whereas it feels less idiomatic to me to load up Images in a random array somewhere, so the question might be more specific to the react domain than I initially indicated.
