Laden von Bildern synchron mit Javascript

Ich muss ein Bild synchron laden, das heißt, ich muss die Ausführung von Javascript anhalten, bis das Bild geladen ist. Da image.onload asynchron ist, wird die Hauptfunktion zurückgegeben, bevor das Bild geladen wird.Laden von Bildern synchron mit Javascript

Ich benutze Leinwand, und wenn die Hauptfunktion zurückgibt, bevor das Bild geladen und daher gezeichnet wird, werden andere Dinge in der Leinwand vor dem Bild gezeichnet. Dies funktioniert nicht, da die Reihenfolge der Zeichnung auf einer Leinwand sehr wichtig ist!

Hier ist, was ich getan habe:

var img = new Image(); 
img.onload = function() { 
    //image drawing code here 
} 
img.src = "blahblahblah"; 
//function returns here, and other drawing code happens before image is drawn

Gibt es eine Möglichkeit, dies synchron zu tun, oder zu warten, bis das Bild vollständig vor der Rückkehr aus der Funktion geladen wird?

Quelle

2009-07-19 devongovett

Gibt es eine Möglichkeit, dies synchron zu tun, oder zu warten, bis das Bild vollständig vor Rückkehr aus der Funktion geladen wird?

Nein. AFAIK, die einzige Sache, die synchron in Javascript durchgeführt werden kann, ist ein synchroner XHR-Aufruf.

In jedem Fall sollten Sie eine Hierarchie von Callbacks einrichten, die Ihre Abhängigkeiten implementieren.

Quelle

2009-07-19 12:53:09

Ich habe eine sehr große Schleife, die viel auf der Leinwand zeichnet, und es ist schwer, die Schleife anzuhalten, während das Bild geladen wird, was ich brauche. Wenn ich den image.onload-Callback verwendete, würde das Bild nach etwas anderem in der Schleife gezeichnet werden. Dadurch erscheint das Bild vor den Dingen, hinter denen es sein sollte. – devongovett

In der Funktion, die das Laden des Bildes startet, verwenden Sie setInterval, um eine Funktion zu starten, die über ein Objekt schließt, das auch von Ihrem image.onload-Callback geschlossen wird. Die Funktion "interval" sollte nichts tun, bis ein bestimmtes Flag gesetzt wurde. Dieses Flag sollte von Ihrem image.onload-Callback gesetzt werden. Wenn das Flag gesetzt ist, sollte die Funktion "interval" den nächsten Code aufrufen; der Code, der über das "Hintergrund" -Bild zeichnet. –

Sie * kann * es nicht pausieren, Sie müssen diese Idee von Ihrem Verstand loswerden. –

Ich glaube nicht, dass Sie es asynchron tun können, und denke, es wäre sehr riskant, wenn der Pfad zu der Image-Datei falsch ist. Sie müssen berücksichtigen, dass Onload ein Rückruf ist, der aufgerufen wird, wenn das Image vollständig geladen ist.

Sie müssen also den gesamten Zeichencode in der Callback-Funktion ausführen.

Quelle

2009-07-19 12:54:15

Kann das nicht durch Refactoring gelöst werden?

Umbrechen Sie den Code, den Sie nach dem Laden des Bildes in eine vom Callback aufgerufene Funktion ausführen müssen (oder diese Funktion zum Callbak machen).

Ich sehe, dass Sie sagen, dass wenn die Hauptfunktion zurückkehrt, anderer Code ausgeführt wird. Kannst du das auch einwickeln? Können Sie die Ausführung verzögern oder von diesem Onload-Ereignis oder einem anderen Ereignis abhängig machen?

Sie könnten sogar die Quelle des anderen Javascript-Codes im Image Onload dynamisch laden.

Quelle

2009-07-19 15:07:19

Laden von Bildern synchron mit Javascript

Antwort

Verwandte Themen