Javascript 图片加载功能挂断了我的浏览器

Question

我正在尝试在 Javascript 和 HTML 中制作简单的游戏，所以我需要图像功能来加载精灵。我希望它等到图像加载完毕，然后再处理另一张图像。不幸的是，我编写的代码使我的浏览器无法工作。我认为应该结束的是无休止的while循环。

这是我的代码：

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 上得到了多次回答。介绍了如何加载多个图像并在完成后继续。

Javascript 图片加载功能挂断了我的浏览器

Javascript images loading function hangs up my browser

javascript

html

image

canvas

while-loop