web-dev-qa-db-fra.com

image.onload et cache du navigateur

Je souhaite créer un message d'alerte après le chargement d'une image, mais si l'image est enregistrée dans le cache du navigateur, l'événement .onload 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");
}
javascriptimage-loading
85
OTAR

Lors de la génération dynamique de l'image, définissez la propriété onload avant la 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 post 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";

Fiddle

123
Fabrício Matté

Il y a deux solutions possibles pour ce genre de situation:

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

  2. Ajoutez un suffixe unique à l'image src pour forcer le navigateur à le 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 un horodatage actuel à la fin de l'URL de l'image, vous le rendez unique et le navigateur télécharge à nouveau l'image.

12
haynar

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 en fonction de .complete.

exemple de code:

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

J'ai rencontré le même problème aujourd'hui. Après avoir essayé diverses méthodes, je me rends compte que le simple fait de placer le code de dimensionnement dans $(window).load(function() {}) au lieu de document.ready résoudrait une partie du problème (si vous n’ajaxez pas la page).

2
user9319

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 fichier .src sur lui-même déclenchera l'événement onload.

0
Noah Ellman