Aguarde a imagem ser carregada antes de prosseguir

Estou desenvolvendo um jogo usando JavaScript e canvas . À medida que o jogo é carregado, todas as imagens que serão usadas estão sendo armazenadas em cache.

Observando o cronograma do recurso, vejo que o código a seguir aciona uma solicitação assíncrona:

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

O motor continuará executando, eventualmente começando a desenhar e jogar o nível. Imagens que são carregadas após o primeiro quadro ser pintado podem nunca aparecer devido ao recorte (ou seja, não ficarem “sujas”).

Então eu testei o seguinte:

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

As saídas resultantes do console na ordem em que ocorrem são:

  • begin
  • end
  • loaded!

Eu estou procurando uma maneira semelhante a $.ajax com async: false para realizar o carregamento. Não consigo descobrir como … obrigado antecipadamente por você ajuda! J.

Você não deve fazer chamadas síncronas (nem mesmo AJAX), mas simplesmente colocar seu código no retorno de chamada apropriado:

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

Então use-o assim:

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

Se você quiser passar argumentos adicionais, você pode fazer assim:

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

Se você deseja carregar vários elementos e precisar aguardar a conclusão de todos eles, considere o uso do object adferido jQuery:

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

Na function que carrega os sprites, você faz algo assim:

 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/

Esta questão é antiga, mas existe uma maneira de fazer isso sem exigir jquery OU congelar o navegador.

Em image1.onLoad, faça com que ele carregue image2.
No image2.onLoad, faça o carregamento da image3.
Em image3.onLoad, faça o carregamento image4.
….
Na imagem n .onLoad, carregue sua function principal.

Não tenho certeza se essa é a melhor maneira de fazer isso, mas é melhor do que congelar o navegador, pelo menos.
Você também pode carregar todos os seus arquivos de áudio ou quaisquer outros resources que precisar, ou qualquer outro javascript que precisar executar.

O congelamento do navegador não é obrigatório

Eu tenho esse problema com canvas eu tentei a sua solução, mas uma maneira melhor e simples que funciona é:

 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); }; } 
Intereting Posts