Подождите, пока изображение будет загружено перед продолжением

Я разрабатываю игру с использованием 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.

Ответ 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();
}

В функции загрузки спрайтов вы делаете что-то вроде этого:

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/

Ответ 2

Этот вопрос старый, но есть способ сделать это, не требуя jquery, или замораживая браузер.

В image1.onLoad, заставьте его загрузить image2.

В image2.onLoad сделайте его загруженным image3.

В image3.onLoad сделайте его загруженным image4.

....
В изображении _n.onLoad заставьте загрузить основную функцию.

Я не уверен, что это самый лучший способ сделать это, но это лучше, чем замораживание браузера.

Вы также можете загружать все ваши аудиофайлы или любые другие ресурсы, которые вам нужны, или любой другой javascript, который вам нужно запустить.

Замораживание браузера не требуется

Ответ 3

У меня эта проблема с холстом Я попробовал ваше решение, но лучший и простой способ работы:

function COLPOinitCanvas(imagesfile) {
    COLPOcanvas = document.getElementById("COLPOcanvas");
    COLPOctx = COLPOcanvas.getContext("2d");
    var imageObj = new Image();
    imageObj.src = imagesfile;
    imageObj.onload = function () {
        COLPOctx.drawImage(imageObj, 0, 0, COLPOcanvas.width, COLPOcanvas.height);
    };
}