événement image.onload et cache du navigateur

Question

Je veux créer une boîte d'alerte après le chargement d'une image, mais si l'image est sauvegardée dans la mémoire cache du navigateur, la boîte d'alerte ne sera pas affichée. .onload ne sera pas déclenché.

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

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

Answer 1

Comme vous générez l'image de manière dynamique, définissez le paramètre onload avant le src .

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

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

Vous pouvez également utiliser la réponse dans ce poste que j'ai adapté 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

Answer 2

Si le src est déjà défini, 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é. Vous devez donc déclencher l'événement en vous basant sur .complete également.

exemple de code :

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

Answer 3

Il existe deux solutions possibles pour ce type de situation :

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

2. Ajoutez un suffixe unique à l'image src pour forcer le navigateur à le télécharger à nouveau, comme ça :

   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.

Answer 4

J'ai rencontré le même problème aujourd'hui. Après avoir essayé plusieurs méthodes, je me suis rendu compte qu'il suffisait de placer le code de dimensionnement à l'intérieur de l'élément suivant $(window).load(function() {}) au lieu de document.ready résoudrait une partie du problème (si vous n'effectuez pas d'ajax sur la page).

Answer 5

J'ai découvert que vous pouvez simplement faire ça dans Chrome :

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

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