Я ради саморазвития написал карточную игру для браузера. Работает на next.js/react.js фреймворке. Карты отрисовываются как background-image к div.
<div class="card_card__2PMY2 " style="background-image: url('TS.png');"></div>
Изображения лежат в проекте в public папке. На пробу сделал анимацию простенькую. Карта просто смещается немного, когда переворачивается.
Все работает, пока связь до сервера хорошая. При плохой связи карты пересовываются дергано и такое ощущение, что вся игра на время загрузки картинки притормаживает. Я на сервере (nginx) активировал кэш, плюс картинки кэшируются в браузере. Но когда начинаешь игру и пока картинок нету в кэше браузера, отображение тормозит. Пока все 52 карты не подгрузятся.
Вопрос в том, как бы мне при открытии сайта загрузить все изображения карт в фоне в кэш браузера. Как это делают старшие товарищи? Какие есть способы?
Спасибо
Простой
Средний
