Как загрузить / выгрузить изображения в HTML5 / JavaScript

Question

Я создаю игру, используя HTML5 и JavaScript, и она будет использовать тонну изображений. Наличие всех этих изображений одновременно занимает много памяти, и мне было интересно, как я мог бы загружать / выгружать разные изображения, чтобы тот, кто играет в игру, не нуждался в 8 ГБ памяти или только для изображений.

<img src = "source1" id = "img1"></img>
<img src = "source2" id = "img2"></img>
<img src = "source3" id = "img3"></img>
<!--Just imagine this for every image, which is likely going to peak over 10,000 at some point-->
<img src = "source10000" id = "img10000"></img>

<canvas width = "1350" height = "600" id = "canva"></canvas>
<script>
var canvas = document.getElementById("canva");
var can = canvas.getContext("2d");

var imge = function(im, x, y, w, h) {
can.drawImage(document.getElementById(im), x, y, w, h);
};

var playerX = 0;
var playerY = 0;

var run = function() {
imge("img1", playerX, playerY, 32, 32);
//Need to use tones of images
requestAnimationFrame(run);
};
run();

</script>

Мне не нужно использовать 10000 изображений одновременно, более того, нужно иметь 60 одновременно (анимации игроков, блоки, анимации врагов, частицы и т. Д.), И, так как я на ранней стадии разработки, я открыт для того, чтобы переделывать вещи, например, как я получаю изображения.

Вопрос: Как загрузить / выгрузить изображения в HTML5 / JavaScrpit

Answer 1

Вы можете контролировать загрузку изображений в JavaScript.Однако, по-видимому, вы не можете заставить браузер выгружать изображение.Браузер сам решит, когда выгрузить его из памяти , если в вашем коде больше нет ссылок на это изображение.

Answer 2

1) Загрузка изображений - с помощью функции js, которая срабатывает при загрузке страницы и гарантирует, что вы установили достаточный кэш для изображений, чтобы они просто запрашивались из сети один раз и подавались из кэша браузера при повторном запросе.Есть несколько способов сделать это, однако лучше всего это сделать с помощью js, так как вам нужно сохранить эталонную переменную этих изображений для шага 2.

2) Выгрузить изображения - в браузерах еще не выгружается изображение из памяти.Однако вы можете переключить источник изображения на изображение меньшего размера , когда оно не используется.

3) Функция рендеринга - вам нужно написать функцию переключателя для переключения изображений, когда они вам нужны, и переключения изображений, когда они не нужны.