javascript - new - evento image.onload y caché del navegador

javascript new image onload

Question

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

¿Cómo disparo una alerta cuando una imagen se ha cargado independientemente de si la imagen ha sido almacenada en caché o no?

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

Answer 1

Como está generando la imagen dinámicamente, establezca la propiedad onload antes del 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 post , que he adaptado para una única imagen generada dinámicamente:

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

Fiddle

Answer 2

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;
});

Configurar el .src a sí mismo activará el evento de carga.

Answer 3

Hay dos posibles soluciones para este tipo de situaciones:

1. Usa la solución sugerida en post

2. Agregue un sufijo único a la imagen src para obligar al navegador a descargarlo 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 agrega la marca de tiempo actual al final de la URL de la imagen, la hace única y el navegador descargará la imagen nuevamente.

Answer 4

He encontrado el mismo problema hoy. Después de probar varios métodos, me doy cuenta de que simplemente coloque el código de tamaño dentro de $(window).load(function() {}) lugar de document.ready resolvería parte del problema (si no está abriendo la página).

Answer 5

Si el src ya está configurado, el evento se activará en el caso en caché incluso antes de que consiga enlazar el manejador de eventos. Por lo tanto, debe desencadenar el evento basado en .complete también.

muestra de código:

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