Por que minha mensagem de alerta JavaScript é exibida antes que uma imagem seja atualizada usando o document.getElementById?

Question

No meu código JavaScript, estou chamando uma função para atualizar uma imagem:

document.getElementByID("i1").src = newImage;

Em seguida, algumas declarações posteriormente a função alert () é chamada para exibir uma mensagem:

alert("image updated!");

No entanto, quando eu corro esse código, o que realmente acontece é que a caixa de alerta está aparecendo antes da a imagem é atualizada. Quando clico no botão "OK" na caixa de diálogo para abaixar a caixa de alerta, a imagem é atualizada.

Por que a ordem desses eventos não está sendo preservada? E existe algum tipo de função de sincronização que eu possa chamar para esperar que a atualização da imagem seja concluída antes que a caixa de diálogo alerta seja exibida?

Estou aberto a reestruturar o código de algumas maneiras (ou seja, usando algo diferente da função alert ()), mas eu prefiro uma solução que permita que o código existente funcione conforme o pretendido.

Answer 1

O carregamento da imagem é assíncrono. O que você precisa é de um retorno de chamada quando a imagem é carregada.

Se você estiver usando o jQuery, pode fazer assim:

var img = $('#i1');
img.load(function() {
    alert('image updated!');
});
img.src = newImage;

Se você estiver usando o protótipo, pode fazê -lo desta maneira:

var img = $('i1');
Event.observe(img, 'load', function(e) {
    alert('image updated!');
});
img.src = newImage;

Observe que, em ambos os casos, é importante que você defina primeiro o retorno de chamada e depois defina a imagem SRC.

Answer 2

Simples.

Definir a propriedade SRC da imagem inicia o carregamento da imagem. Mas como o carregamento acontece com assíncrona, a caixa de alerta é exibida antes da conclusão do carregamento.

Answer 3

A caixa de alerta bloqueia a atualização da imagem em segundo plano. O que o navegador faz é o download da imagem (você pode ver isso com o Wireshark ou algo semelhante), mas o navegador não altera nada na página da web enquanto o JavaScript é executado. Se você possui métodos JavaScript intensivos em computação, tente usar os webworkers.