javascript - 在继续之前等待图像加载

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");

按照它们出现的顺序生成的控制台输出是:

• 开始
• 结束
• 已加载!

我正在寻找与 $.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 deferred对象:

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/