Sollte ein Bild src auf Daten URL sofort verfügbar sein?

Betrachten Sie das folgende (zerbrechlich) 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 Frage(N)

  • Sollte die Bildbreite und-Höhe werden sofort korrigiert werden?
  • Sollte die Leinwand zeichnen, sofort mit der Arbeit an?
  • Sollte die onload Rückruf (nach der src geändert wurde) aufgerufen werden?

Experimentelle Tests
Ich erstellte eine einfache test-Seite mit ähnlichem code. In Safari meinen ersten tests, sowohl durch das öffnen der HTML-Seite lokal (file:/// url) und laden Sie es von meinem server, zeigte alles: die Höhe und Breite stimmt, die Leinwand zeichnen, Werken, und die onload auch feuert.

In Firefox v3.6 (OS X), das laden der Seite nach dem Start des Browsers zeigt, dass die Höhe/Breite ist nicht richtig, sofort nach der Einstellung drawImage() ausfällt. (Die onload - handler kann jedoch ausgelöst werden.) Laden Sie die Seite erneut, jedoch zeigt die Breite/Höhe nicht richtig, sofort nach der Einstellung, und drawImage() arbeiten. Es scheint, dass Firefox werden die Inhalte der Daten-URL als Bild und hat es sofort zur Verfügung, wenn in der gleichen Sitzung.

In Chrom v8 (OS X) sehe ich die gleichen Ergebnisse wie in Firefox: das Bild ist nicht sofort verfügbar, aber es dauert einige Zeit, um asynchron 'load' aus dem data-URL.

Zusätzlich zu den experimentellen Beweis für das, was in Browsern oben funktioniert oder nicht funktioniert, möchte ich gerne die links zu den Spezifikationen, wie dies Verhalten sollen. Soweit mein Google-fu hat nicht bis zu der Aufgabe.

Es Zu Spielen Sicher
Für diejenigen, die nicht verstehen, warum die oben gefährlich sein kann, wissen, dass Sie verwenden sollten Bilder wie dieses, um sicher zu sein:

//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 = '...';

InformationsquelleAutor der Frage Phrogz | 2011-01-23

  1. 51

    Als niemand gefunden keine Angaben darüber, wie dieser ist soll zu Verhalten, müssen wir zufrieden sein mit dem, wie es hat Verhalten. Im folgenden sind die Ergebnisse meiner tests.

     | ist-Bild-Daten verwendbar rechts | tut onload-callback-set nach src 
| nach Einstellung der src? | geändert, bekomme immer noch aufgerufen? 
------------+-----------------------------+------------------------------------- 
Safari 5 | ja | ja 
------------+-----------------------------+------------------------------------- 
Chrome 8 | **Nein** * (1. laden der Seite), aber | ja 
FireFox 3.6 | ja danach (zwischengespeichert) | 
------------+-----------------------------+------------------------------------- 
IE8 | ja (32 kB Daten-limit) | ja 
------------+-----------------------------+------------------------------------- 
IE9b | ja | **Nein** * 
------------+-----------------------------+-------------------------------------

    In der Zusammenfassung:

    • Sie können nicht davon ausgehen, dass die Bilddaten werden direkt nach dem setzen einer data-uri; Sie müssen warten, für die onload Veranstaltung.
    • Aufgrund IE9, können Sie nicht die onload handler nach der Einstellung der src und erwartet, dass Sie aufgerufen werden.
    • Die Empfehlungen in "Playing it Safe" (von der Frage oben) sind der einzige Weg, um sicherzustellen, dass Sie korrekte Verhalten.

    Wenn jemand finden kann, Spezifikationen, darüber zu reden, werde ich akzeptieren gerne Ihre Antwort statt.

    InformationsquelleAutor der Antwort Phrogz

  2. 6

    Nachdem er die Kontrolle zurück an den browser-rendering-engine, die test-Berichte true im FF und Chrom 4b9 8.0.552.237. Ich veränderte diese Teile:

    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 diese 'Antwort' ist mehr wie ein Kommentar, aber wollte nur darauf hingewiesen haben. Und nach dem testen bekomme ich reproduzierbare Ergebnisse:

    • ohne setTimeout in beiden Browsern bekomme ich false ich das erste mal die Seite öffnen und true nur nach dem drücken von F5. Nach explizit den cache leeren beide sagen false wieder nach Neuladen.
    • mit setTimeout die Breite/Höhe test immer evualuates zu true.

    In beiden Fällen wird das Bild nicht zeigen, bis auf die erste Zeit, erst nach Neuladen der Seite.

    InformationsquelleAutor der Antwort Marcel Korpel

Schreibe einen Kommentar