evento image.onload e cache del browser

Desidero creare una casella di avviso dopo il caricamento di un'immagine, ma se l'immagine viene salvata nella cache del browser, l' .onloadevento non verrà attivato.

Come faccio ad attivare un avviso quando un'immagine è stata caricata indipendentemente dal fatto che l'immagine sia stata memorizzata nella cache o meno?

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

Mentre stai generando l'immagine in modo dinamico, imposta la onloadproprietà prima del src.

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

Fiddle : testato sulle ultime versioni di Firefox e Chrome.

Puoi anche usare la risposta in questo post , che ho adattato per una singola immagine generata dinamicamente:

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

Violino

Se src è già impostato, l'evento viene attivato nel caso memorizzato nella cache prima ancora che venga associato il gestore di eventi. Quindi, dovresti attivare anche l'evento in base .complete.

codice di esempio:

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

Esistono due possibili soluzioni per questo tipo di situazioni:

1. Usa la soluzione suggerita in questo post

2. Aggiungi un suffisso univoco all'immagine srcper forzare il browser a scaricarla di nuovo, in questo modo:

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

In questo codice ogni volta che aggiungi il timestamp corrente alla fine dell'URL dell'immagine lo rendi unico e il browser scaricherà di nuovo l'immagine

Oggi ho incontrato lo stesso problema. Dopo aver provato vari metodi, mi rendo conto che inserire semplicemente il codice di dimensionamento all'interno $(window).load(function() {})invece di document.readyrisolvere parte del problema (se non stai modificando la pagina).

Ho scoperto che puoi farlo semplicemente in Chrome:

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

L'impostazione di .src su se stesso attiverà l'evento onload.