Événement image.onload et cache du navigateur

Je souhaite créer une boîte d'alerte après le chargement d'une image, mais si l'image est enregistrée dans le cache du navigateur, l' .onloadévénement ne sera pas déclenché.

Comment déclencher une alerte lorsqu'une image a été chargée, que l'image ait été mise en cache ou non?

var img = new Image();
img.src = "img.jpg";
img.onload = function () {
   alert("image is loaded");
}

Lorsque vous générez l'image dynamiquement, définissez la onloadpropriété avant le src.

var img = new Image();
img.onload = function () {
   alert("image is loaded");
}
img.src = "img.jpg";

Fiddle - testé sur les dernières versions de Firefox et Chrome.

Vous pouvez également utiliser la réponse dans ce article , que j'ai adaptée pour une seule image générée dynamiquement:

var img = new Image();
// 'load' event
$(img).on('load', function() {
  alert("image is loaded");
});
img.src = "img.jpg";

Violon

Si le src est 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é. Donc, vous devez également déclencher l'événement .complete.

exemple de code:

$("img").one("load", function() {
   //do stuff
}).each(function() {
   if(this.complete || /*for IE 10-*/ $(this).height() > 0)
     $(this).load();
});

Il existe deux solutions possibles pour ce type de situation:

1. Utilisez la solution suggérée sur ce post

2. Ajoutez un suffixe unique à l'image srcpour forcer le navigateur à la télécharger à nouveau, comme ceci:

   var img = new Image();
   img.src = "img.jpg?_="+(new Date().getTime());
   img.onload = function () {
       alert("image is loaded");
   }

Dans ce code, chaque fois que vous ajoutez l'horodatage actuel à la fin de l'URL de l'image, vous la rendez unique et le navigateur téléchargera à nouveau l'image

J'ai rencontré le même problème aujourd'hui. Après avoir essayé différentes méthodes, je me rends compte que simplement mettre le code de dimensionnement à l'intérieur $(window).load(function() {})au lieu de document.readyrésoudre une partie du problème (si vous n'ajaxez pas la page).

J'ai trouvé que vous pouvez simplement le faire dans Chrome:

  $('.onload-fadein').each(function (k, v) {
    v.onload = function () {
        $(this).animate({opacity: 1}, 2000);
    };
    v.src = v.src;
});

Définir le .src sur lui-même déclenchera l'événement onload.