Callback jQuery sur le chargement de l'image (même si l'image est en cache)

Question

Je veux le faire :

$("img").bind('load', function() {
  // do stuff
});

Mais l'événement load ne se déclenche pas lorsque l'image est chargée depuis le cache. La documentation de jQuery suggérer un plugin pour résoudre ce problème, mais ça ne marche pas

Answer 1

Si le src est déjà défini, alors l'événement se déclenche dans le cas de la mise en cache, avant même que le gestionnaire d'événement ne soit lié. Pour résoudre ce problème, vous pouvez boucler la vérification et le déclenchement de l'événement en fonction des éléments suivants .complete comme ceci :

$("img").one("load", function() {
  // do stuff
}).each(function() {
  if(this.complete) {
      $(this).load(); // For jQuery < 3.0 
      // $(this).trigger('load'); // For jQuery >= 3.0 
  }
});

Notez le changement de .bind() a .one() pour que le gestionnaire d'événement ne soit pas exécuté deux fois.

Answer 2

Puis-je vous suggérer de le recharger dans un objet image non DOM ? S'il est mis en cache, cela ne prendra pas de temps du tout, et le onload se déclenchera quand même. Si elle n'est pas mise en cache, le onload se déclenchera au moment du chargement de l'image, ce qui devrait correspondre à la fin du chargement de la version DOM de l'image.

Javascript :

$(document).ready(function() {
    var tmpImg = new Image() ;
    tmpImg.src = $('#img').attr('src') ;
    tmpImg.onload = function() {
        // Run onload code.
    } ;
}) ;

Mise à jour (pour gérer les images multiples et avec une pièce jointe onload correctement ordonnée) :

$(document).ready(function() {
    var imageLoaded = function() {
        // Run onload code.
    }
    $('#img').each(function() {
        var tmpImg = new Image() ;
        tmpImg.onload = imageLoaded ;
        tmpImg.src = $(this).attr('src') ;
    }) ;
}) ;

Answer 3

Ma solution simple, elle ne nécessite aucun plugin externe et devrait suffire pour les cas courants :

/**
 * Trigger a callback when the selected images are loaded:
 * @param {String} selector
 * @param {Function} callback
  */
var onImgLoad = function(selector, callback){
    $(selector).each(function(){
        if (this.complete || /*for IE 10-*/ $(this).height() > 0) {
            callback.apply(this);
        }
        else {
            $(this).on('load', function(){
                callback.apply(this);
            });
        }
    });
};

Utilisez-le comme ceci :

onImgLoad('img', function(){
    // do stuff
});

par exemple, pour faire apparaître vos images en fondu sur la charge, vous pouvez le faire :

$('img').hide();
onImgLoad('img', function(){
    $(this).fadeIn(700);
});

---

Ou comme alternative, si vous préférez une approche de type plugin jquery :

/**
 * Trigger a callback when 'this' image is loaded:
 * @param {Function} callback
 */
(function($){
    $.fn.imgLoad = function(callback) {
        return this.each(function() {
            if (callback) {
                if (this.complete || /*for IE 10-*/ $(this).height() > 0) {
                    callback.apply(this);
                }
                else {
                    $(this).on('load', function(){
                        callback.apply(this);
                    });
                }
            }
        });
    };
})(jQuery);

et l'utiliser de cette manière :

$('img').imgLoad(function(){
    // do stuff
});

par exemple :

$('img').hide().imgLoad(function(){
    $(this).fadeIn(700);
});

Answer 4

Faut-il vraiment le faire avec jQuery ? Vous pouvez joindre le onload directement sur votre image ;

<img src="/path/to/image.jpg" onload="doStuff(this);" />

Il se déclenchera chaque fois que l'image sera chargée, à partir du cache ou non.

Answer 5

J'ai eu ce problème moi-même, j'ai cherché partout une solution qui n'implique pas de tuer mon cache ou de télécharger un plugin.

Je n'ai pas vu ce fil de discussion immédiatement et j'ai donc trouvé quelque chose d'autre à la place qui est une solution intéressante et (je pense) digne d'être postée ici :

$('.image').load(function(){
    // stuff
}).attr('src', 'new_src');

En fait, j'ai eu cette idée dans les commentaires ici : http://www.witheringtree.com/2009/05/image-load-event-binding-with-ie-using-jquery/

Je n'ai aucune idée de la raison pour laquelle cela fonctionne, mais je l'ai testé sur IE7 et là où cela ne fonctionnait pas auparavant, cela fonctionne maintenant.

J'espère que cela vous aidera,

Modifier

La réponse acceptée explique en fait pourquoi :

Si le src est déjà défini, l'événement est déclenché dans le cache avant que le gestionnaire d'événement ne soit lié.