javascript while循环运行时图像不加载答案

【问题标题】：Images don't load while javascript while loop runsjavascript while循环运行时图像不加载
【发布时间】：2011-03-22 12:59:36
【问题描述】：

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

【问题讨论】：

标签： javascript image while-loop preloader

【解决方案1】：

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

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

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

这是假设您使用的是 jQuery。

【讨论】：

【解决方案2】：

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

setInterval('checkimages()', 1000)

【讨论】：

【解决方案3】：

您的代码中有一些错误。

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

轮询应该使用 setInterval() 或 setTimeout() 而不是循环。
另一个问题是在您的循环期间，您的 loaded 变量会在每次循环运行时加载一个或多个图像时递增，因此 loaded 可能不是在所有图像都已加载时达到 images.length，而是当至少一个已加载时。

【讨论】：

第一点 -> 好！第二个->在while循环的每次迭代中将加载的初始化为0；）

【解决方案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';

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

【讨论】：