如何在HTML5 / JavaScript中加载/卸载图像

Question

我正在使用HTML5和JavaScript创建游戏，并且将使用大量图像。 一次拥有所有这些图像会占用大量内存，而我想知道如何加载/卸载不同的图像，这样，玩游戏的人就不需要8GB的存储空间，也就不需要这些图像。

<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>

我不需要一次使用10,000张图像，更不需要一次使用60张图像（玩家动画，块，敌方动画，粒子等），而且由于我处于开发初期，因此我愿意重做一些事情，就像我抓图像一样。

问题：如何在HTML5 / JavaScrpit中加载/卸载图像

Answer 1

您可以控制在JavaScript中加载图片 。 但是，您似乎无法强制浏览器卸载图像。 只要您的代码中不再有对该图像的引用， 浏览器就会自行决定何时将其从内存中卸载 。

Answer 2

1）加载图像-使用js函数，可在页面加载时触发并确保您在图像上设置了足够的缓存，以便仅从网络一次请求它们，并在再次请求时从浏览器的缓存中提供它们。 有多种方法可以执行此操作，但是最好用js完成，因为您需要在第2步中保留这些图像的参考变量。

2）卸载图像-浏览器中还没有从内存中卸载图像。 但是，您可以在不使用图像源时将其切换为较小的图像 。

3）渲染功能-您需要编写一个开关功能以在需要时切换图像，而在不需要时切换出图像。