JQuery warten auf das Laden dynamischer Bilder

Question

Also habe ich eine Seite, die Bilder dynamisch lädt auf Benutzeranforderung, im Grunde wird ein zufälliges Bild erscheinen, wenn sie auf eine Schaltfläche klicken. Ich möchte einen Weg finden, um das Bild zu verstecken, bis es fertig geladen ist, und dann wieder anzuzeigen. Ich habe versucht, dies mit Jquery's $(window).load() Funktion zu machen und es funktioniert perfekt für das erste Bild, aber wenn ich das nächste Bild lade, wird das Ereignis nicht wieder ausgelöst. Gibt es eine andere Möglichkeit, dies zu tun, oder das load() Ereignis zurückzusetzen? Danke.

Hinweis: Die betreffenden Bilder sind ziemlich große animierte GIFs, aber sie variieren sehr, einige brauchen nur wenige Momente zum Laden und manche können bis zu 20 Sekunden dauern.

Answer 1

Ich habe ein jQuery-Plugin namens waitForImages, das dabei hilft.

$('#newly-loaded-element').hide().waitForImages(function() {
    $(this).show();
});

Answer 2

Verstecke es mit CSS und höre jedes Bild-Load-Ereignis ab:

$(function(){
    $(".loadedImage").live("load", function(){
        $(this).show();
    });
});

Answer 3

Es heißt Lazy-Load und es gibt ein spezielles JQuery-Plugin dafür.