image.onload evento y caché del navegador

Quiero crear un cuadro de alerta después de que se cargue una imagen, pero si la imagen se guarda en la caché del navegador, el .onloadevento no se activará.

¿Cómo puedo activar una alerta cuando se ha cargado una imagen independientemente de si la imagen se ha almacenado en caché o no?

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

A medida que genera la imagen de forma dinámica, establezca la onloadpropiedad antes de src.

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

Fiddle : probado en las últimas versiones de Firefox y Chrome.

También puede usar la respuesta en esta publicación , que adapté para una sola imagen generada dinámicamente:

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

Violín

Si el src ya está configurado, entonces el evento se activa en el caso almacenado en caché incluso antes de que consigas el controlador de eventos vinculado. Por lo tanto, también debe activar el evento basado en .complete.

muestra de código:

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

Hay dos posibles soluciones para este tipo de situaciones:

1. Utilice la solución sugerida en esta publicación

2. Agregue un sufijo único a la imagen srcpara obligar al navegador a descargarla nuevamente, así:

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

En este código, cada vez que agregas la marca de tiempo actual al final de la URL de la imagen, la haces única y el navegador descargará la imagen nuevamente.

Hoy me he encontrado con el mismo problema. Después de probar varios métodos, me doy cuenta de que simplemente poner el código de tamaño dentro en $(window).load(function() {})lugar de document.readyresolvería parte del problema (si no está agregando la página).

Descubrí que puedes hacer esto en Chrome:

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

Establecer el .src a sí mismo activará el evento onload.