如何在 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 中控制loading images。但是，您似乎无法强制浏览器卸载图像。 browser will decide for itself when to unload it from memory，只要您的代码中不再有对该图像的任何引用。

Answer 2

1) 加载图像 - 使用 js 函数，在页面加载时触发并确保您在图像上设置足够的缓存，以便它们只从网络请求一次，并在再次请求时从浏览器的缓存中提供。有多种方法可以做到这一点，但最好使用 js，因为您需要为步骤 2 保留这些图像的引用变量。

2) 卸载图像 - 浏览器中还没有从内存中卸载图像。但是，您可以在不使用image to a smaller image 的源时切换它。

3) 渲染函数 - 您需要编写一个开关函数来在需要时切换图像并在不需要时切换图像。