image.événement de chargement et cache du navigateur

Question

image.événement de chargement et cache du navigateur

je veux créer une boîte d'alerte après une image est chargée, mais si l'image est enregistrée dans le cache du navigateur, le .onload l'é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");
}

82

image-loading javascript

demandé sur kgrote 2012-09-10 19:31:04

5 réponses

score 114 · Answer 1

comme vous générez l'image dynamiquement, définissez la propriété onload avant la propriété 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";

Violon

score 12 · Answer 2

il y a deux solutions possibles pour ce genre de situations:

utilisez la solution suggérée sur this post

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 courant à la fin de L'URL de l'image, vous le rendez unique et navigateur va télécharger à nouveau l'image

score 7 · Answer 3

si le src est déjà défini, alors l'événement se déclenche dans le cas caché avant même que le gestionnaire d'événements ne soit lié. Donc, vous devez déclencher l'événement basé sur .complete aussi.

exemple de code:

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

score 2 · Answer 4

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

score 0 · Answer 5

j'ai trouvé que vous pouvez juste faire cela dans Chrome:

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

réglage du .src pour lui-même va déclencher l'événement onload.

Las etiquetas más populares

image.événement de chargement et cache du navigateur

5 réponses