Sollte das Setzen eines Bild-src auf eine Daten-URL sofort verfügbar sein?

Betrachten Sie den folgenden (fragilen) JavaScript-Code:

var img = new Image;
img.src = "data:image/png;base64,..."; // Assume valid data

// Danger(?) Attempting to use image immediately after setting src
console.log( img.width, img.height );
someCanvasContext.drawImage( img, 0, 0 );

// Danger(?) Setting onload after setting src
img.onload = function(){ console.log('I ran!'); };

Die Fragen)

• Sollte die Bildbreite und -höhe sofort korrekt sein?
• Sollte die Leinwandzeichnung sofort funktionieren?
• Sollte der onloadRückruf (eingestellt nach dem Ändern des src) aufgerufen werden?

Experimentelle Tests
Ich habe eine einfache Testseite mit ähnlichem Code erstellt. In Safari haben meine ersten Tests, sowohl beim lokalen Öffnen der HTML-Seite ( file:///URL) als auch beim Laden von meinem Server, gezeigt, dass alles funktioniert: Die Höhe und Breite sind korrekt, das Zeichnen der Leinwand funktioniert und das wird onloadauch ausgelöst.

In Firefox v3.6 (OS X) zeigt das Laden der Seite nach dem Starten des Browsers, dass die Höhe / Breite unmittelbar nach dem Einstellen nicht korrekt ist drawImage(). (Der onloadHandler wird jedoch ausgelöst.) Beim erneuten Laden der Seite wird jedoch angezeigt, dass die Breite / Höhe unmittelbar nach dem Einstellen und drawImage()Arbeiten korrekt ist . Es scheint, dass Firefox den Inhalt der Daten-URL als Bild zwischenspeichert und sofort verfügbar hat, wenn er in derselben Sitzung verwendet wird.

In Chrome v8 (OS X) werden dieselben Ergebnisse wie in Firefox angezeigt: Das Image ist nicht sofort verfügbar, es dauert jedoch einige Zeit, bis es asynchron von der Daten-URL "geladen" wird.

Zusätzlich zum experimentellen Beweis, welche Browser die oben genannten Funktionen ausführen oder nicht, würde ich gerne Links zu Spezifikationen verwenden, wie sich dies verhalten soll. Bisher war mein Google-Fu der Aufgabe nicht gewachsen.

Auf Nummer sicher gehen
Wenn Sie nicht verstehen, warum das oben Genannte gefährlich sein kann, sollten Sie aus Sicherheitsgründen solche Bilder verwenden:

// First create/find the image
var img = new Image;

// Then, set the onload handler
img.onload = function(){
  // Use the for-sure-loaded img here
};

// THEN, set the src
img.src = '...';

Da niemand hat noch keine Angaben darüber , wie gefunden hat dies angeblich verhalten, werden wir mit werden müssen zufrieden , wie es tut verhalten. Es folgen die Ergebnisse meiner Tests.

            | Ist Bilddaten verwendbar? Wird der Onload-Rückruf nach src gesetzt?
            | nach dem Einstellen von src? | wird geändert noch aufgerufen?
------------ + ----------------------------- + ------- ------------------------------
Safari 5 | ja | Ja                
------------ + ----------------------------- + ------- ------------------------------
Chrome 8 | ** nein ** (1. Seite laden), aber | Ja                
FireFox 3.6 | ja danach (zwischengespeichert) |                                     
------------ + ----------------------------- + ------- ------------------------------
IE8 | ja (32kB Datenlimit) | Ja         
------------ + ----------------------------- + ------- ------------------------------
IE9b | ja | **Nein**              
------------ + ----------------------------- + ------- ------------------------------

Zusammenfassend:

• Sie können nicht davon ausgehen, dass die Bilddaten direkt nach dem Festlegen einer Daten-URL verfügbar sind. Sie müssen auf das onloadEreignis warten .
• Aufgrund von IE9 können Sie den onloadHandler nach dem Festlegen von nicht festlegen srcund erwarten, dass er aufgerufen wird.
• Die Empfehlungen in "Auf Nummer sicher gehen" (aus der obigen Frage) sind die einzige Möglichkeit, ein korrektes Verhalten sicherzustellen.

Wenn jemand Spezifikationen findet, die dies diskutieren, werde ich stattdessen gerne ihre Antwort akzeptieren.

Nach der trueRückgabe der Kontrolle an die Rendering-Engine des Browsers werden die Testberichte in FF 4b9 und Chromium 8.0.552.237 erstellt. Ich habe diese Teile modifiziert:

img.onload = function(){   // put this above img.src = …
    document.getElementById('onload').innerHTML = 'yes';
};
img.src = img_src;
…
window.setTimeout(function () {   // put this inside setTimeout
    document.getElementById('wh').innerHTML = (img.height==img.width) && (img.height==128);
}, 0);

Update: Ja, ich verstehe, dass diese 'Antwort' eher wie ein Kommentar ist, wollte aber nur darauf hinweisen. Und nach dem Testen erhalte ich reproduzierbare Ergebnisse:

• ohne setTimeout, in beiden Browsern bekomme ich falsedas erste Mal die Seite zu öffnen und trueerst nach dem Schlagen F5. Nachdem der Cache explizit geleert wurde, sagen beide falsenach dem erneuten Laden erneut.
• mit setTimeoutdem Breiten- / Höhentest immer zu bewerten true.

In beiden Fällen wird das Bild erst beim erneuten Laden der Seite beim ersten Mal angezeigt.