var img=new Image();
img.src='xxxxx';
Wird der Browser darauf warten, dass das Bild geladen wird, und die nächste Codezeile ausführen?asynchron oder synchron? wenn wir die src-Eigenschaft des Image-Objekts festlegen?
Diese Aktion ist asynchron; Eine Menge Code für das Vorladen von Bildern hängt von dieser Funktion ab.
EDIT: Um ein bisschen mehr nützliche Informationen zu geben. Wenn Sie bestimmte Aktionen synchron haben wollen, sind warten auf Bilder über Javascript das Bildobjekt zu laden, können Sie das Onload-Ereignis verwenden, etwa so:
var img = new Image();
img.onload = function() { /* onLoad code here */ };
img.src = 'xxxxxx';
var img = new 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.
Jetzt sind Bilder replaced elements, was bedeutet, dass sie geladen werden, wann immer sie ankommen, aber Platz ist für sie im Layoutfluss reserviert, 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.)
Veraltet? "Ja wirklich?" Ich glaube nicht, dass es überhaupt jemals Teil eines Standards war. –
@Tim Down: Ich meine nur, dass dies die alte (c. 1990er) Art der Erstellung von Bildern ist, die nicht Teil der aktuellen Praxis ist. – Robusto
'new Image()' funktioniert weiterhin in jedem skriptfähigen Browser, der Bilder unterstützt, und ich würde es gegenüber 'innerHTML' bevorzugen. Vereinbart, dass 'document.createElement (" IMG ")" vorzuziehen ist. –
Einverstanden mit @dereleased Bild Vorladung wird asynchron durchgeführt; 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 zum Beispiel die Verwendung von Arrays oder Event-Handlern.
https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5214317.html
ändern src ist asynchron.
Der Code
image.src = "http://newimage-url";
kehrt sofort und wird der Browser in einem anderen Thread neues Bild laden. Bevor es vollständig geladen ist, sind alle Attribute dieses Tags nicht korrekt, z. B. Breite oder Höhe.
So kann $(image).width() die neue Bildbreite möglicherweise nicht zurückgeben.
Wie @Deleaseased aufgezeigt wurde, können Sie eine 'on-load'-Methode implementieren, die erst nach dem Laden des Bildes ausgeführt wird. jQuerys load() kann dies problemlos erfüllen.
Beachten Sie das asynchrone Laden von Bildern beim Festlegen der Bildquelle und der Größenanpassung unmittelbar nach dem Festlegen der Bildquelle. https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader Größe ändern könnte oder wird nicht funktionieren ... onload muss verwendet werden ... – OSP