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");
}

问题是循环永远不会结束，因为图像[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可能会达到{{1}并非当所有图像都已加载但至少有一个已加载时。

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

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

循环运行时，javascript时加载图像

4 个答案: