jQuery .load() non sta lavorando sulle immagini (probabilmente la cache?)

Question

ho qualche codice jQuery piuttosto semplice:

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

Tuttavia, thats non sparare in modo coerente. Si attiva se eseguo un aggiornamento o chiudo il browser, ma un normale aggiornamento o semplicemente premendo lo stesso URL due volte in qualsiasi momento senza cancellare la cache fa sì che il .load() non venga attivato.

Qualche idea su come risolvere questo problema?

Answer 1

Un modo sarebbe aggiungere una "variabile fittizia" alla fine dell'URL che si usa per catturare l'immagine ... come il tempo in millisecondi aggiunto come parametro della stringa di query.

Answer 2

Come hanno detto Ron e El Guapo, la risposta è aggiungere una query alla fine dell'URL. Ho fatto questo in questo modo:

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

Answer 3

Penso che questo has been discussed before. Non è il caching di per sé che è il problema, ma il tempismo: le immagini potrebbero essere già state caricate dal momento in cui il gestore eventi è collegato (quindi non viene mai attivato). Ciò si può anche verificare se non si verifica alcuna memorizzazione nella cache, ad esempio in un browser con multithreading su una connessione molto veloce. Fortunatamente, c'è una proprietà .complete che è possibile utilizzare:

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

È anche possibile creare il proprio evento allegare funzione:

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

E poi chiamare i seguenti:

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