2

我正在为我的 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 循环正在停止加载图像。如果这是真的，我将如何解决这个问题？

4

4 回答 4

2

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

setInterval('checkimages()', 1000)
于 2010-07-29T05:39:20.813 回答
1

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

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

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

这是假设您使用的是 jQuery。

于 2010-07-29T05:31:02.033 回答
1

您的代码中有一些错误。

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

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

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

于 2010-07-29T05:58:06.223 回答
0

您可以使用 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';

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

于 2010-12-03T17:06:03.170 回答