等待图像才去加载 [英] Wait for image to be loaded before going on

问题描述

我正在开发使用javascript +帆布游戏。随着游戏的负载，将要使用的所有图像被缓存。

I'm developing a game using javascript + canvas. As the game loads, all images that will be used are being cached.

五合一资源时间表，我看到下面的code触发一个异步请求：

Observing the resource timeline, I see that the following code triggers an asynchronous request:

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

该发动机将继续执行，最终开始绘制和发挥水平。在于，在第​​一帧画后加载的图像可能永远不会出现因削波（即没有获得脏）。

The engine will keep executing, eventually beginning to draw and play the level. Images that are loaded after the first frame is painted might never appear due to clipping (i.e. not getting "dirty").

所以，我测试了以下内容：

So I tested the following:

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

由此产生的控制台输出
开始
结束
装！

The resulting console outputs are begin end loaded!

我在寻找类似的方式$就与异步：假进行加载。无法弄清楚如何...在此先感谢您的帮助！
学家

I'm looking for a similar way to $.ajax with async: false to perform the loading. Can't figure out how... thanks in advance for you help! J.

推荐答案

您不应该做任何事情，同步（甚至没有AJAX）调用，而是简单地把你的code在适当的回调：

You shouldn't make anything synchronous (not even AJAX) calls but instead simply put your code in the appropriate callback:

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

然后使用它是这样的：

Then use it like this:

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

如果你想传递额外的参数，你可以做这样的：

If you want to pass additional arguments, you can do it like this:

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();
}

在功能加载的精灵，你做这样的事情：

In the function loading the sprites, you do something like this:

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/

这篇关于等待图像才去加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！