Wird der Browser darauf warten, dass das Bild geladen wird, und die nächste Codezeile ausführen?
Diese Aktion ist asynchron; Eine Menge Code zum Laden von Bildern hängt von dieser Funktion ab.
EDIT: Um ein bisschen mehr nützliche Informationen zu geben. Wenn Sie bestimmte Aktionen synchron abwarten möchten, bis Bilder über das JavaScript-Bildobjekt geladen werden, können Sie das onload-Ereignis wie folgt verwenden:
%Vor%Ändern von src ist asynchron.
Der Code
image.src = "http://newimage-url";
kehrt sofort zurück und der Browser lädt ein neues Bild in einen anderen Thread. Bevor es vollständig geladen ist, sind alle Attribute dieses <img> -Tags nicht korrekt, z. B. Breite oder Höhe.
So $(image).width() kann die neue Bildbreite nicht zurückgeben.
Wie @Deleaseased gezeigt wurde, können Sie eine 'on-load'-Methode implementieren, deren Code erst nach dem Laden des Bildes ausgeführt wird. jQuerys load() kann dies leicht erfüllen.
var img = neues Bild ();
Dies ist die alte Methode zum Erstellen von Bildern, die veraltet ist. Bevorzugen Sie document.createElement('IMG') oder erstellen Sie einen durch Strings und innerHTML.
Nun sind Bilder ersetzte Elemente , was bedeutet, dass sie bei jedem Eintreffen geladen werden, aber Platz für sie im Layoutfluss reserviert ist wenn ihre Abmessungen angegeben sind. (Wenn nicht, wird ein Platz in Symbolgröße reserviert und der Bildschirm wird neu gezeichnet, wenn das Bild mit seinen Abmessungen in der Kopfzeile ankommt. Dies kann eine beunruhigende Benutzererfahrung sein. Daher sollten Sie die Bilddimensionen bereithalten, während die Seite gerendert wird das erste Mal.)
Übereinstimmung mit dem Vorabladen von @dereleased-Images erfolgt asynchron; ich dachte nur, ich würde hinzufügen, dass es eine Reihe von Möglichkeiten gibt, diese Technik für das Image () -Objekt in Javascript zu verwenden, wie die Verwendung von Arrays oder Event-Handlern.
Tags und Links javascript