Pourquoi mon message d'alerte JavaScript est-il affiché avant la mise à jour d'une image à l'aide de document.getElementByID?

Question

Dans mon code JavaScript Je suis d'abord appeler une fonction de mise à jour d'une image:

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

puis quelques déclarations plus tard, la fonction d'alerte() est appelée à afficher un message:

alert("image updated!"); 

Cependant, quand je cours ce code, ce qui se passe réellement est que la boîte d'alerte est surgie avant l'image est mise à jour. Lorsque je clique sur le bouton "OK" dans la boîte de dialogue pour mettre la boîte d'alerte, l'image est mise à jour.

Pourquoi l'ordre de ces événements n'est-il pas conservé? Et y a-t-il une sorte de fonction de synchronisation que je peux appeler pour attendre la fin de la mise à jour de l'image avant l'affichage de la boîte de dialogue d'alerte? Je suis prêt à restructurer le code d'une certaine manière (c'est-à-dire en utilisant autre chose que la fonction alert()), mais je préférerais une solution qui permette au code existant de fonctionner comme prévu.

Answer 1

Le chargement de l'image est asynchrone. Ce dont vous avez besoin est un rappel pour quand l'image est chargée.

Si vous utilisez jQuery, vous pouvez le faire comme ceci:

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

Si vous utilisez Prototype, vous pouvez le faire de cette façon:

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

Notez que dans les deux cas, il est important que vous définissiez d'abord le rappel, puis définissez l'image src.

Answer 2

Simple.

La définition de la propriété src de l'image lance le chargement de l'image. Mais comme le chargement se fait de manière asynchrone, la boîte d'alerte s'affiche avant que le chargement ne soit terminé.

Answer 3

La zone d'alerte bloque la mise à jour de l'image en arrière-plan. Qu'est-ce que le navigateur fait est le téléchargement de l'image (vous pouvez le voir avec wireshark ou quelque chose de similaire) mais le navigateur ne change rien sur la page Web pendant que JavaScript est exécuté. Si vous utilisez des méthodes JavaScript intensives, essayez d'utiliser WebWorkers.