Was ist der beste Weg, um entdecken ein Bild, download Abschluss - onload-oder addEventListener()?

Um zu erkennen, Wann ein Bild herunterladen abgeschlossen ist, welche Methode sollte ich verwenden?

image.onload = function () {}

oder 

image.addEventListener("load", function () {} );
  • wenn ich mich nicht sehr Irre, sind Sie viel von einer Gleichheit
  • stackoverflow.com/questions/6902033/... - habe ich gerade hier gefunden.
  • Studieren die ins und outs der beiden, und dann entscheiden, welche zu verwenden, basierend auf der situation.
  • Erfahren Sie mehr über die Unterschiede und viel mehr (!), haben Sie einen Blick auf quirksmode.org/js/introevents.html.
InformationsquelleAutor | 2013-02-14
  1. 11

    onload:

    1. Unterstützt nur einen einzigen Hörer.
    2. In allen Browsern funktioniert.
    3. Sie lösen die Ereignis-handler deaktivieren onload Eigenschaft.

    addEventListener:

    1. Unterstützt mehrere Zuhörer.
    2. Funktioniert nicht in älteren IE-Browser, verwenden Sie attachEvent).
    3. Sie die Bindung der Hörer mit removeEventListener() erfordert die info Identifizierung der ursprünglichen eventListener.

    Wenn addEventListener unterstützt wird und Sie brauchen nur einen Zuhörer, dann können Sie entweder.

    Wenn es ein einfaches geschlossenes Stück code, dass niemand sonst wird messing mit dann, gibt es kein Problem bei der Verwendung onload. Wenn es ein eher Komplexes Stück software, das andere Entwickler mit Chaos und jede Art der Erweiterbarkeit gewünscht ist, müssen Sie cross-browser-support für event-Listener, dann addEventListener() ist flexibler und wird wahrscheinlich mehr wünschenswert.

    • Konnte erwähnenswert, dass es unverbindlich ist einfacher mit der onload Eigenschaft.
    • funktioniert auch, und ich nie begegnet bin, ein Grund, um die Bindung einer load-Ereignisprozedur für ein Bild. In jedem Fall werde ich hinzufügen, dass der Unterschied.
    • Ich glaube nicht, dass es nichts falsch mit der Verwendung onload in einigen Situationen, insbesondere wenn Sie möchten, um die Unterstützung für ältere IE-Browser und nicht bereits cross-browser event-Bibliothek vorhanden (wie bei einem einfachen stand-alone-widget). Sicherlich addEventListener() ist flexibler (Unterstützung für mehrere Zuhörer).
    InformationsquelleAutor jfriend00
  2. 2

    versuchen 

    if(image.complete){
  //....
}
    InformationsquelleAutor T.Todua
  3. 1

    image.addEventListener("load", function() {} ); funktionieren nicht auf allen Browsern, aber vorausgesetzt, Sie haben ein backup und verwenden image.attachEvent("onload", function() {})

    if(image.addEventListener) { image.addEventListener("load",function() {}); }
else { image.attachEvent("onload", function() {}); }

    Diese haben den Vorteil, dass Sie nicht überschreiben alle onload-Ereignis, das bereits vorhanden ist auf dem Bild, und dass Ihr onload-Ereignis wird nicht überschrieben werden, indem ein anderer code.

    Direkt ändern des "onload" - Attribut eines DOM-Elements ist in der Regel nicht empfohlen, nur weil Sie denken "Hey, ich kann es sparen Sie ein paar Zeilen code, indem Sie es, und ich brauche nur einen Zuhörer, so werde ich nur setzen Sie es anstatt mit addEventListener/attachEvent" - aber es führt unweigerlich zu "und was ist, wenn ich muss hinzufügen, etwas anderes später?"

    Aus diesem Grund javascript-Entwickler in der Regel verwenden eine Bibliothek, um Ereignisse anfügen, so können Sie den Hörer getrost mit einer Zeile code und es funktioniert in allen Browsern.

    InformationsquelleAutor codefactor
  4. 1

    Sowohl Image.complete sowie image.onload scheinen nicht zu funktionieren in Webkit, zumindest die version auf meinem Handy. Sie kehren false unendlich. Es funktioniert in opera, obwohl, so kann der code ok sein.

    Daher bin ich derzeit mit einem trick, der funktioniert zumindest in opera und webkit. Ich habe eine 1x1 pixel Platzhalter-Bild bereit. Jetzt habe ich den src dem zu ladenden Bild-und (in der Regel eine schlechte Praxis, aber dies ist ein Spiel, das nicht starten kann, ohne das Bild) ich gehe in eine Schleife, die updates einige "laden" splashscreen gfx, aber im Grunde prüft nur die Breite des Bildes, ob die image.width größer ist als 1 pixel.

    Wie gesagt, getestet nur mit opera und webkit. Ich verwende es zum laden eines atlas-Bild und kopieren Sie die mit Fliesen einzelnen Bilder über eine Leinwand. Sobald Sie fertig sind, die src des atlas-Bild wieder auf das 1x1 Platzhalter, so kann es verwendet werden, dass Art und Weise wieder. Für vollständige savity, sollte man auch warten, bis der Platzhalter ist 1 pixel in der Breite wieder, bevor reuseing es so.

    InformationsquelleAutor dd_1138
Schreibe einen Kommentar