我正在使用 JavaScript 加载图像。像这样的东西:

images[0]=new Image();
images[0].onload=function(){loaded++;console.log(loaded)};
images[0].src="assets/img/image.png";

当我查看日志时,我看到所有图像都加载得很好,因为“加载”变量的值随着每个加载的图像而增加。

但是我想停止执行任何进一步的操作,直到这个数量达到最大值,所以在设置图像后,我放置了一个 while 循环。
while(loaded<11){
    document.getElementById("test").innerHTML="Loading "+loaded+"/11";
    console.log(loaded);
}
//Some code here which should only run after everything has been loaded
//In other words: when the statement in the while cycle becomes false

然而,我的浏览器只是崩溃了,因为 while 似乎陷入了无限循环。当我查看日志时,我看到“0”被写入了 1000 次,然后是从 1 到 11 的数字(这意味着图像实际上已加载,但 while 并不关心它,并且崩溃得更快比它可能发生)。

我相信我在这里尝试使用的方法不是解决这个问题的正确方法。

在加载站点所需的每个 Assets 之前,如何将所有内容搁置?

最佳答案

我个人讨厌使用 while()...我认为最简单的方法是使用事件监听器。

var img = new Image;
img.addEventListener("load", function () {

//Img loaded

});
img.src= e.target.result;

关于javascript - 在 JavaScript 中等待图像加载完成,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37854355/

10-09 15:34
查看更多