Самый эффективный способ отображения карточных изображений для игры Javascript

Question

Если у меня есть несколько карточных изображений для игры на Javascript, какой самый эффективный способ отобразить эти картинки?
Лучше всего просто создать новый объект с таким же URL-адресом изображения?
Стоит ли предварительно загружать все изображения, а затем скрывать их и клонировать экземпляр объекта изображения?
Есть ли другой метод?

Answer 1

• Предварительно загрузите их, конечно.
• Используйте спрайты всякий раз, когда это возможно, например, вы можете загрузить каждый костюм в одном изображении. Затем вы можете загрузить каждую карту в качестве фона div.
• Пока вы загружаете изображения с одного URL. Браузер должен использовать клиентский локально кэшированный файл, а не запрашивать его с сервера.
• Клонирование должно быть хорошим, но это должен быть глубокий клон, иначе манипулирование одним из них повлияет на все остальные клоны.

Answer 2

Хорошей идеей будет предварительно загрузить их все, чтобы они появлялись по мере необходимости без задержки даже при первом запросе. Убедитесь, что они кэшируются на стороне пользователя.

Задумывались ли вы об использовании CSS-Sprite для ваших изображений? Это, вероятно, также сильно ускорит процесс, поскольку вам не придется запрашивать заголовки для 52 различных изображений. Вы можете положить 13 карточек в ряд и иметь 4 ряда карточек по одной для каждой масти, а затем просто настроить background-position соответственно для каждой карточки, и вам будет гарантировано, что после загрузки одной карточки все они загружены.

Answer 3

Опция, которую я делаю, называется CSS Spriting .По сути, вы объединяете все свои изображения в одно большое изображение, а затем используете CSS для отображения нужного изображения, устанавливая атрибуты width и left.Преимущество заключается в том, что все изображения загружаются одновременно, поскольку это всего лишь одно большое изображение.

Answer 4

Насколько наиболее эффективный способ показать их: возможно, замена атрибута "src" общего элемента img. Что касается предварительной загрузки: вероятно, хорошая идея. все, что вам нужно сделать для предварительной загрузки изображения, это что-то вроде

var preloadImg = new Image();
preloadImg.src = "blah";

, который загружает его в кеш, и все готово.