webentwicklung-frage-antwort-db.com.de

jQuery oder JavaScript: Legen Sie fest, wann das Laden des Bildes abgeschlossen ist

Wie kann ich feststellen, ob ein Bild vom Server oder vom Browser-Cache geladen wurde? Ich möchte verschiedene Bilder in dasselbe <img/>-Tag laden und feststellen, wann das Laden neuer Bilder abgeschlossen ist.

Vielen Dank.

javascriptjqueryimageloadcomplete
20
Francisc
$('img').on('load', function() {
    // do whatever you want
});
38
Matthew

Das Ereignis onload des Dokuments wird erst ausgelöst, nachdem alle Elemente, einschließlich der Bilder, vollständig geladen wurden.

Das Ereignis onload <img> wird ausgelöst, nachdem das einzelne Bild vollständig geladen wurde.

Sie können diesen Ereignissen also einen Listener zuordnen, indem Sie jQuery-Objekte oder den addEventListener (und den attachEvent des IE) von DOM verwenden.

5
Pikrass

Ich denke, das sieht ein bisschen sauberer aus

$('img').load(function() {
    // Your img has finished loading!
});
4
Henrik

Nun, das ist ein ziemlich alter Thread, den ich gestern gesehen habe. Ich verwende backbone.js und require.js und die Größenänderung meines Layouts verursachte immer Probleme mit Ansichten, die Bilder enthalten.

Ich musste also wissen, wann das letzte Bild geladen wurde, um die Größe des Layouts zu ändern. Alle oben genannten Lösungen haben in meinem Fall nicht funktioniert. Nach einigen Stunden weiterer Nachforschungen fand ich die ultimative Lösung, die funktioniert:

http://desandro.github.com/imagesloaded/

Hoffe, dass das auch anderen hilft.

4
bardu

Aus einer sehr ähnlichen Frage Offizieller Weg, um jQuery zu fragen, warten Sie, bis alle Bilder geladen sind, bevor Sie etwas ausführen und genau wie Pikrass sagt:

Mit jQuery verwenden Sie $(document).ready(), um etwas auszuführen, wennDOMgeladen ist, und $(window).load(), um etwas auszuführen, wenn auch alle anderen Dinge geladen sind, z. B. die Bilder.

Hier sind zwei Beispiele:

DOM

jQuery(document).ready(function(){
    console.log('DOM ready');
});

Bilder/Alles andere

jQuery(window).load(function(){
    console.log('all other things ready');
});

Sie sollten in der Lage sein, in Ihrer Konsole Folgendes zu bestätigen:

screenshot-with-shadow.png http://img547.imageshack.us/img547/9681/yih.png

2
cwd

Versuchen Sie Folgendes für eine gründlichere Erkennung des Ladens von Bildern, einschließlich der aus dem Cache geladenen Bilder: https://github.com/paulirish/jquery.imgloaded

2
bejonbee

Alle erwähnten, dass das Ereignis ausgelöst werden sollte, bevor es auf src gesetzt wird.

Wenn Sie sich jedoch keine Sorgen machen möchten, können Sie das Ereignis oncomplete verwenden (das auch bei zwischengespeicherten Bildern ausgelöst wird), um onload auszulösen.

$("img").one("load", function() {
  // do stuff
}).each(function() {
  if(this.complete) $(this).load();
});

Mit jQuery müssen Sie sich keine Gedanken über die Abwärtskompatibilität machen (z. B .: img.height>0 in IE)

0
Tom Sarduy