Rappel jQuery lors du chargement de l'image (même lorsque l'image est mise en cache)

Je veux faire:

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

Mais l'événement de chargement ne se déclenche pas lorsque l'image est chargée à partir du cache. Les documents jQuery suggèrent un plugin pour résoudre ce problème, mais cela ne fonctionne pas

Si le srcest déjà défini, l'événement se déclenche dans le cas mis en cache, avant même que le gestionnaire d'événements ne soit lié. Pour résoudre ce problème, vous pouvez parcourir en boucle la vérification et le déclenchement de l'événement en fonction .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 la modification de .bind()à .one()afin que le gestionnaire d'événements ne s'exécute pas deux fois.

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 la charge continuera de se déclencher. S'il n'est pas mis en cache, il déclenchera la onload lors du chargement de l'image, ce qui devrait être en même temps que la version DOM de l'image termine le chargement.

Javascript:

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

Mise à jour (pour gérer plusieurs images et avec une pièce jointe correctement commandé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') ;
    }) ;
}) ;

Ma solution simple, elle n'a besoin d'aucun plugin externe et pour les cas courants devrait suffire:

/**
 * 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 estomper vos images au chargement, vous pouvez 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 utilisez-le de cette manière:

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

par exemple:

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

Devez-vous vraiment le faire avec jQuery? Vous pouvez également joindre l' onloadévénement directement à votre image;

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

Il se déclenchera à chaque chargement de l'image, depuis le cache ou non.

Vous pouvez également utiliser ce code avec la prise en charge des erreurs de chargement:

$("img").on('load', function() {
  // do stuff on success
})
.on('error', function() {
  // do stuff on smth wrong (error 404, etc.)
})
.each(function() {
    if(this.complete) {
      $(this).load();
    } else if(this.error) {
      $(this).error();
    }
});

Je viens d'avoir ce problème moi-même, j'ai cherché partout une solution qui n'impliquait pas de tuer mon cache ou de télécharger un plugin.

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

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

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

Je ne sais pas pourquoi cela fonctionne, mais j'ai testé cela sur IE7 et où il s'est cassé avant qu'il ne fonctionne maintenant.

J'espère que ça aide,

Éditer

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

Si le src est déjà défini, l'événement se déclenche dans le cache mis en cache avant que le gestionnaire d'événements ne soit lié.

En utilisant jQuery pour générer une nouvelle image avec le src de l'image et en lui affectant directement la méthode de chargement, la méthode de chargement est appelée avec succès lorsque jQuery a fini de générer la nouvelle image. Cela fonctionne pour moi dans IE 8, 9 et 10

$('<img />', {
    "src": $("#img").attr("src")
}).load(function(){
    // Do something
});

Une solution que j'ai trouvée https://bugs.chromium.org/p/chromium/issues/detail?id=7731#c12 (Ce code provient directement du commentaire)

var photo = document.getElementById('image_id');
var img = new Image();
img.addEventListener('load', myFunction, false);
img.src = 'http://newimgsource.jpg';
photo.src = img.src;

Une modification de l'exemple de GUS:

$(document).ready(function() {
    var tmpImg = new Image() ;
    tmpImg.onload = function() {
        // Run onload code.
    } ;

tmpImg.src = $('#img').attr('src');
})

Définissez la source avant et après l'onload.

Il suffit de rajouter l'argument src sur une ligne distincte après la définition de l'objet img. Cela incitera IE à déclencher l'événement lad. C'est moche, mais c'est la solution de contournement la plus simple que j'ai trouvée jusqu'à présent.

jQuery('<img/>', {
    src: url,
    id: 'whatever'
})
.load(function() {
})
.appendTo('#someelement');
$('#whatever').attr('src', url); // trigger .load on IE

Je peux vous donner un petit conseil si vous voulez faire comme ça:

<div style="position:relative;width:100px;height:100px">
     <img src="loading.jpg" style='position:absolute;width:100px;height:100px;z-index:0'/>
     <img onLoad="$(this).fadeIn('normal').siblings('img').fadeOut('normal')" src="picture.jpg" style="display:none;position:absolute;width:100px;height:100px;z-index:1"/>
</div>

Si vous faites cela lorsque le navigateur met en cache des images, ce n'est pas un problème, toujours img affiché, mais en chargeant img sous une image réelle.

J'ai eu ce problème avec IE où l'e.target.width ne serait pas défini. L'événement de chargement se déclencherait mais je n'ai pas pu obtenir les dimensions de l'image dans IE (chrome + FF a fonctionné).

Il se trouve que vous devez chercher e.currentTarget.naturalWidth & e.currentTarget.naturalHeight .

Encore une fois, IE fait les choses à sa façon (plus compliquée).

Vous pouvez résoudre votre problème en utilisant le plugin JAIL qui vous permet également de charger des images paresseuses (améliorant les performances de la page) et de passer le rappel en paramètre

$('img').asynchImageLoader({callback : function(){...}});

Le HTML devrait ressembler à

<img name="/global/images/sample1.jpg" src="/global/images/blank.gif" width="width" height="height" />

Si vous voulez une solution CSS pure, cette astuce fonctionne très bien - utilisez l'objet transform. Cela fonctionne également avec les images lorsqu'elles sont mises en cache ou non:

CSS:

.main_container{
    position: relative;
    width: 500px;
    height: 300px;
    background-color: #cccccc;
}

.center_horizontally{
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: green;
  left: 50%;
  top: 0;
  transform: translate(-50%,0);
}

.center_vertically{
  position: absolute;
  top: 50%;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: blue;
  transform: translate(0,-50%);
}

.center{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  background-color: red;
  transform: translate(-50%,-50%);
}

HTML:

<div class="main_container">
  <div class="center_horizontally"></div>
  <div class="center_vertically"></div>
  <div class="center"></div>
  </div>
</div

Exemple de Codepen

Exemple Codepen LESS