Javascript图像加载功能挂起我的浏览器

Question

我正在尝试用Javascript和HTML制作简单的游戏，所以我需要图像函数来加载精灵。我希望它等到图像加载完毕，然后继续处理另一张图像。不幸的是，我编写的代码阻止了我的浏览器工作。我认为应该完成的是无休止的循环。

这是我的代码：

var Sprites = {};
function NewSprite( Name, URL )
{
    Sprites[ Name ] = new Image( );
    Sprites[ Name ].Ready = false;
    Sprites[ Name ].onload = function ( )
    {
        this.Ready = true;
    }
    Sprites[ Name ].src = URL;
    while ( Sprites[ Name ].Ready === false );
}

当我在最后运行它而不运行 while 循环并检查Sprites[ Name ].Ready值时，它给了我true所以我认为它应该可以工作。

我像这样调用我的函数：

NewSprite( "img", "http://lorempixel.com/output/abstract-q-g-100-100-6.jpg" );

感谢您的帮助！

Answer 1

JavaScript 是单线程的，这意味着它任何时候都只能执行一部分代码。

这一行：

while ( Sprites[ Name ].Ready === false );

将阻止浏览器执行任何其他操作，包括设置Ready状态，这意味着循环将永远持续并最终触发浏览器中的脚本阻止。事件是异步的，但不能与多线程混淆（这是另一回事）。

您需要一种不同的方法来解决此问题

var Sprites = {};
function NewSprite( Name, URL, callback ) {
    Sprites[ Name ] = new Image( );
    Sprites[ Name ].Ready = false;
    Sprites[ Name ].onload = function ( ) {
        this.Ready = true;
        // continue from here
        callback(this);       // use a callback
    }
    Sprites[ Name ].src = URL;
    //while ( Sprites[ Name ].Ready === false );  Will block browser...!
}

现在您可以通过以下方式使用代码：

NewSprite("img", url, function(image) {
    // continue from here...
});

虽然，这已经在SO上回答了很多次。下面是有关如何加载多个图像并在完成后继续的示例。