web-dev-qa-db-fra.com

rappel jquery après le chargement de toutes les images dans dom?

Comment puis-je déclencher un événement lorsque toutes les images du DOM sont chargées? J'ai beaucoup googlé. Je l'ai trouvé, mais cela ne semble pas fonctionner:

événement jQuery pour les images chargées

jqueryimageload
43
Dee

Utilisez la load()(documents) méthode contre le window.

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

Ou faites-le directement via window.onload .

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

Si vous souhaitez qu'un événement distinct se déclenche pour chaque image, placez une .load() sur chaque image.

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

Ou s'il y a une chance qu'une image puisse être mise en cache, procédez comme suit:

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

MODIFIER:

Pour effectuer une action après le dernier chargement de l'image, utilisez un compteur défini sur le nombre total d'images et décrémentez chaque fois qu'un gestionnaire de chargement est appelé.

Quand il atteint 0, Exécutez un autre code.

$(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

Voici ce que j'ai trouvé, en utilisant différé objets et $.when au lieu d'utiliser un compteur.

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 */
});

Faites-moi savoir s'il y a des mises en garde.

6
holmis83

Un problème que j'ai rencontré avec la solution modifiée de user113716 est qu'une image cassée empêchera le compteur d'atteindre 0. Cela l'a corrigé pour moi.

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