Warum erscheint meine JavaScript Warnmeldung, bevor ein Bild aktualisiert wird document.getElementById mit?

Question

In meinem JavaScript-Code Ich bin zuerst eine Funktion aufrufen, um ein Bild zu aktualisieren:

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

dann ein paar Aussagen später die alert () Funktion wird aufgerufen, um eine Nachricht anzuzeigen:

alert("image updated!");

Allerdings, wenn ich diesen Code ausführen, eigentlich das, was passiert ist, dass das Warnfeld aufgetaucht ist vor das Bild aktualisiert wird. Wenn ich auf die Schaltfläche „OK“ im Dialog das Benachrichtigungsfeld nach unten zu nehmen, das Image-Updates.

Warum ist die Reihenfolge dieser Ereignisse nicht beibehalten werden? Und gibt es eine Art Funktion der Synchronisierung kann ich für das Bild-Update vollständig warten aufrufen, bevor der Alarm-Dialog angezeigt wird?

Ich bin offen, um den Code in gewisser Weise auf der Umstrukturierung (das heißt, mit etwas anderes als die alert () Funktion), aber ich würde eine Lösung bevorzugen, die den vorhandenen Code arbeiten kann wie vorgesehen.

Answer 1

Bild Laden ist asynchron. Was Sie brauchen, ist ein Rückruf für, wenn das Bild geladen wird.

Wenn Sie jQuery verwenden, können Sie es wie folgt tun:

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

Wenn Sie Prototype verwenden, können Sie es auf diese Weise tun:

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

Beachten Sie, dass in jedem Fall ist es wichtig, dass Sie zunächst den Rückruf definieren, dann das Bild src gesetzt.

Answer 2

Einfach.

Zur Einstellung der Eigenschaft src des Bildes initiiert das Laden des Bildes. Da aber der Laden geschieht asynchron, die Warnfenster wird angezeigt, bevor der Ladevorgang abgeschlossen ist.

Answer 3

Die Alert-Box blockiert die Aktualisierung des Bildes im Hintergrund. Was der Browser tut, ist das Herunterladen des Bildes (Sie können das sehen, mit wireshark oder so ähnlich), aber der Browser nicht alles auf der Webseite ändern, während JavaScript ausgeführt wird. Wenn Sie rechenintensive Javascript Methoden haben, versuchen Webworkers verwenden.