等待图像加载后再继续

Question

我正在使用JavaScript和开发游戏canvas.随着游戏加载,将使用所有将要使用的图像.

观察资源时间线,我看到以下代码触发异步请求:

var sprite = new Image();
sprite.src = "sprites/sheet1.png";

引擎将继续执行,最终开始绘制并播放关卡.绘制第一帧后加载的图像可能永远不会因剪裁而出现(即不会变得"脏").

所以我测试了以下内容:

console.log("begin");
var sprite = new Image();
sprite.onload = function() { console.log('loaded!'); };
sprite.src = "sprites/sheet1.png";
console.log("end");

生成的控制台输出顺序如下:

• begin
• end
• loaded!

我在寻找类似的方式$.ajax与async: false执行加载.无法弄清楚如何...提前感谢您的帮助!J.

Answer 1

你不应该做任何同步(甚至不是AJAX)调用,而是简单地将你的代码放在适当的回调中:

function loadSprite(src, callback) {
    var sprite = new Image();
    sprite.onload = callback;
    sprite.src = src;
}

然后像这样使用它:

loadSprite('sprites/sheet1.png', function() {
    // code to be executed later
});

如果要传递其他参数,可以这样做:

sprite.onload = function() {
    callback(whatever, args, you, have);
};

如果要加载多个元素并需要等待所有元素完成,请考虑使用jQuery 延迟对象:

function loadSprite(src) {
    var deferred = $.Deferred();
    var sprite = new Image();
    sprite.onload = function() {
        deferred.resolve();
    };
    sprite.src = src;
    return deferred.promise();
}

在加载sprite的函数中,你可以这样做:

var loaders = [];
loaders.push(loadSprite('1.png'));
loaders.push(loadSprite('2.png'));
loaders.push(loadSprite('3.png'));
$.when.apply(null, loaders).done(function() {
    // callback when everything was loaded
});

http://api.jquery.com/jQuery.when/