我正在使用 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/