webentwicklung-frage-antwort-db.com.de

jquery callback nachdem alle bilder in dom geladen sind?

Wie kann ich ein Ereignis auslösen, wenn alle Bilder im DOM geladen sind? Ich habe viel gegoogelt. Ich habe das gefunden, aber es scheint nicht zu funktionieren:

jQuery-Ereignis für geladene Bilder

43
Dee

Verwenden Sie die load()(docs) Methode gegen das window.

$(window).load(function() {
    // this will fire after the entire page is loaded, including images
});

Oder einfach direkt über window.onload .

window.onload = function() {
    // this will fire after the entire page is loaded, including images
};

Wenn Sie möchten, dass für jedes Bild ein separates Ereignis ausgelöst wird, platzieren Sie eine .load() auf jedem Bild.

$(function() {
    $('img').one('load',function() {
        // fire when image loads
    });
});

Oder wenn die Möglichkeit besteht, dass ein Bild zwischengespeichert wird, gehen Sie wie folgt vor:

$(function() {
    function imageLoaded() {
       // function to invoke for loaded image
    }
    $('img').each(function() {
        if( this.complete ) {
            imageLoaded.call( this );
        } else {
            $(this).one('load', imageLoaded);
        }
    });
});

EDIT:

Um nach dem Laden des letzten Bildes eine Aktion auszuführen, verwenden Sie einen Zähler, der auf die Gesamtzahl der Bilder festgelegt ist, und verringern Sie ihn bei jedem Aufruf eines Load-Handlers.

Wenn es 0 Erreicht, führen Sie einen anderen Code aus.

$(function() {
    function imageLoaded() {
       // function to invoke for loaded image
       // decrement the counter
       counter--; 
       if( counter === 0 ) {
           // counter is 0 which means the last
           //    one loaded, so do something else
       }
    }
    var images = $('img');
    var counter = images.length;  // initialize the counter

    images.each(function() {
        if( this.complete ) {
            imageLoaded.call( this );
        } else {
            $(this).one('load', imageLoaded);
        }
    });
});
113
user113716

Unten ist, was ich mit verzögert Objekten und $.when anstelle eines Zählers.

var deferreds = [];
$('img').each(function() {
    if (!this.complete) {
        var deferred = $.Deferred();
        $(this).one('load', deferred.resolve);
        deferreds.Push(deferred);
    }
});
$.when.apply($, deferreds).done(function() {
    /* things to do when all images loaded */
});

Lassen Sie mich wissen, wenn es irgendwelche Vorbehalte gibt.

6
holmis83

Ein Problem, auf das ich bei der bearbeiteten Lösung von user113716 gestoßen bin, ist, dass ein defektes Bild verhindert, dass der Zähler jemals 0 erreicht. Dies hat es für mich behoben.

.error(function(){
  imageLoaded();
  $(this).hide();
});
5
jel