javascript while循环运行时图像无法加载

Question

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

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';

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