How to load images before using in css?

Question

css

For the sake of self-development, I wrote a card game for the browser. Powered by next.js/react.js framework. The cards are rendered as background-image to the div.

<div class="card_card__2PMY2 " style="background-image: url('TS.png');"></div>

The images are in the project in the public folder. On trial, I made a simple animation. The card just shifts slightly when flipped.

Everything works as long as the connection to the server is good. With a bad connection, the cards are shifted jerkily and it seems that the whole game slows down while the picture is loading. I activated the cache on the server (nginx), plus the pictures are cached in the browser. But when you start the game and while there are no images in the browser cache, the display slows down. Until all 52 cards are loaded.

The question is, how would I load all the map images in the background into the browser cache when I open the site. How do senior comrades do it? What are the ways?

Thanks

Answer 1

1) upload a photo with a script
2) make a sprite