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）渲染功能-您需要编写一个开关功能以在需要时切换图像，而在不需要时切换出图像。

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

2 个答案: