jQuery .load() no disparar sobre imágenes (probablemente el almacenamiento en caché?)

Question

Tengo algo de código bastante básico jQuery:

... 
$(this).find('img').load(function(){ 
    loadedImages++; 
    if(loadedImages == $this.find('img').length){ 
... 

Sin embargo, eso no es disparando constantemente. Dispara si hago una actualización o cierro mi navegador, pero una actualización normal, o simplemente presionar la misma URL dos veces en cualquier momento sin borrar el caché, hace que el .load() nunca se active.

¿Alguna idea sobre cómo solucionar esto?

Answer 1

Una forma sería agregar una "variable ficticia" al final de la URL que utiliza para tomar la imagen ... como el tiempo en milisegundos anexado como parámetro de cadena de consulta.

Answer 2

Como dijeron Ron y El Guapo, la respuesta es agregar una consulta al final de la URL. Hice esto así:

$(this).find('img').each(function(){ 
    $(this).attr('src',$(this).attr('src')+'?'+new Date().getTime()) 
}).load(function(){ 
    //This will always run now! 

Answer 3

Creo que esto has been discussed before. El problema no es el almacenamiento en caché, sino el momento: es posible que las imágenes ya se hayan cargado antes de conectar el controlador de eventos (para que nunca se active). Esto también puede ocurrir si no ocurre el almacenamiento en caché, por ejemplo en un navegador multiproceso en una conexión muy rápida. Afortunadamente, hay una propiedad .complete que puede utilizar:

var load_handler = function() { 
    loadedImages++; 
    … 
} 
$(this).find('img').filter(function() { 
    return this.complete; 
}).each(load_handler).end().load(load_handler); 

También puede crear su propio evento función de adjuntar:

jQuery.fn.extend({ 
    ensureLoad: function(handler) { 
     return this.each(function() { 
      if(this.complete) { 
       handler.call(this); 
      } else { 
       $(this).load(handler); 
      } 
     }); 
    } 
}); 

y luego llamar de la siguiente manera:

$(this).find('img').ensureLoad(function(){ 
    loadedImages++; 
    if(loadedImages == $this.find('img').length){ 
    … 
});