当 javascript while 循环运行时图像不会加载

Question

我正在为我的 html5 项目编写一个图像预加载器，但遇到了一个问题。游戏中使用的图像是用 JavaScript 中的图像对象定义的，如下所示：

images = new Array();
images[0] = new Image();
images[0].src = '/images/tiles/grass.png';

一旦“document.ready”，预加载器函数就会运行，如下所示。

function preLoader(){
    while(loaded != images.length){
        var loaded = 0;
        for(var loadTest = 0; loadTest < images.length; loadTest++){
            if(images[loadTest].complete){
                loaded ++;
            }
        }
        console.log(loaded);
    }
    console.log("loaded all");
}

问题是循环永远不会结束，因为 images[loadTest].complete 总是返回 false。我已经测试过在页面加载后几秒钟图像已加载完毕后运行该函数并且它工作得很好。

因此，我假设 while 循环运行正在阻止图像加载。如果这是真的，我将如何解决这个问题？

Answer 1

除了 onload 事件之外，您还可以通过 setTimeout 或 setInterval 调用加载图像或进行轮询。这会导致代码以非阻塞方式运行。

setInterval('checkimages()', 1000)

Answer 2

传递给 .ready() 的处理程序保证在之后执行DOM 已构建，但在接收图像等资产之前。

您可能想使用 .load() 处理程序：

$(window).load(function () {
  // run code when the page is fully loaded including graphics.
});

这是假设您正在使用 jQuery。

Answer 3

您的代码中有一些错误。

• 最大的问题是你正在循环中进行轮询，这在 Javascript 中是不应该做的。 Javascript 与页面在同一线程中运行，因此 Javascript 中的处理会阻止页面中的其他操作，包括加载和用户交互。一般来说，在没有某种延迟的情况下进行轮询也是一个坏主意，在此期间您放弃了对 CPU 的控制。

  轮询应该使用 setInterval() 或 setTimeout() 而不是循环来完成。

• 另一个问题是在循环期间，每次循环运行时加载一个或多个图像时，loaded 变量都会递增，因此 loaded 可能会达到images.length 不是当所有图像都已加载时，而是当至少一个图像已加载时。

Answer 4

您可以使用 Image.onload 事件。我不太擅长 Javascript，但类似这样的东西应该可以工作并避免使用计时器：

var loadCounter = 0;

function imageLoaded() {
    loadCounter++;
    if(loadCounter == images.length) {
        console.log("images loaded");
    }
}

images = new Array();
images[0] = new Image();
images[0].onload = imageLoaded;
images[0].src = '/images/tiles/grass.png';

基本上，每当加载图像时，我们都会增加计数器。如果所有图像均已加载，我们将记录输出。