imagen.onload evento y caché del navegador

Quiero crear un cuadro de alerta después de cargar una imagen, pero si la imagen se guarda en la caché del navegador, el evento .onload no se disparará.

¿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");
}
Author: kgrote, 2012-09-10
Source

5 answers

Mientras generas la imagen dinámicamente, establece la propiedad onload 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 puedes usar la respuesta en este post , 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";

Fiddle

 114
Author: Fabrício Matté,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 11:47:21

Hay dos posibles soluciones para este tipo de situaciones:

  1. Utilice la solución sugerida en este post

  2. Añade un sufijo único a la imagen src para forzar al navegador a descargarla de nuevo, 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 agregue la marca de tiempo actual al final de la URL de la imagen, la hace única y el navegador descargará la imagen nuevamente

 12
Author: haynar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 11:47:21

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

Ejemplo de código: 

$("img").one("load", function() {
   //do stuff
}).each(function() {
   if(this.complete || /*for IE 10-*/ $(this).height() > 0)
     $(this).load();
});
 7
Author: Tom Sarduy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-02 22:55:15

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

 2
Author: user9319,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-01-03 06:32:25

Encontré que puedes hacer esto en Chrome: 

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

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

 0
Author: Noah Ellman,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-01 08:15:31