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

Posted 2021-03-27

我正在使用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 / JavaScript中加载/卸载图像

答案

您可以在JavaScript中控制loading images。但是，您似乎无法强制浏览器卸载映像。 browser will decide for itself when to unload it from memory只要你的代码中不再有任何对该图像的引用。

另一答案

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

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

3）渲染功能 - 当您需要时，您需要编写一个切换功能来切换图像，并在不需要时切换图像。