jquery callback sul caricamento dell'immagine quando si cambia src

Question

Sto cambiando img src una volta caricato un file json, tutto funziona correttamente. Ma voglio assicurarmi che l'immagine sia completamente caricata. Che posso fare utilizzando:

 .one("load",function(){ 
       alert("image has load yay"); 
      }); 

Ma dopo aver letto vari post che non tutti i browser sparano il carico se l'immagine è nella cache. Non riesco a riscontrare questo problema nel browser che ha lo scopo di causare questo problema. Ma ho testato solo FF (6.0.2), Chrome (13.0.7) e Safari (5.0.5) su un Mac. Ora sono sicuro che IE deve avere un problema ed è solo relativo al PC. Sto eseguendo versioni abbastanza recenti dei browser, quindi è cambiato qualcosa in questi e ora carica. O il mio altro pensiero è che sto utilizzando l'ultima versione di jquery (1.6.3) .load è stato modificato?

Spero che tutto funzioni con l'ultimo jQuery, ma se non lo è ed è un vecchio problema del browser, devo inserire una correzione. Ho provato un paio di soluzioni in questo sito, ad esempio: jQuery loading images with complete callback E anche alcuni dei commenti nella pagina .load api: http://api.jquery.com/load-event/#comment-30211903

Ma io non riesco a farli funzionare. Il primo non funziona affatto e il secondo sembra cadere con il .each().

Questo è il codice che ho finora, che sembra funzionare bene, ma non può essere sicuro come forse un vecchio problema del browser.

$.getJSON(jsonURL, function(json) {   
    $("a.imgZoom img").attr("src", json[imageID].largeImage).one("load",function(){ 
     alert("the image has loaded"); 
    //do something here 
    }); 
$("a.imgZoom").attr("href", json[imageID].largeImage); 
}) 

Grazie in anticipo per qualsiasi aiuto.

B

Answer 1

Sulla base di alcuni test che ho fatto circa un anno fa, ho trovato alcun modo affidabile per ottenere un evento di carico quando si cambia la .src di un'immagine da un valore all'altro. Come tale, ho dovuto ricorrere al caricamento di una nuova immagine e alla sostituzione di quella che avevo con quella nuova quando è stata caricata la nuova immagine. Quel codice è stato eseguito con successo in diverse centinaia di siti Web (è utilizzato da una presentazione) per circa un anno ora, quindi so che funziona.

Se si imposta il gestore di carico PRIMA di impostare la proprietà .src su una nuova immagine, si otterrà in modo affidabile l'evento di caricamento. Ecco un codice che ho scritto poco prima per catturare l'evento load: jQuery: How to check when all images in an array are loaded?.

Questo codice che si attacca il gestore di eventi PRIMA impostazioni .src funziona per me nei browser moderni che ho provato in (non ho la prova i vecchi browser):

$("img").one("load", function() { 
     // image loaded here 
    }).attr("src", url); 

si può vedere lavora qui: http://jsfiddle.net/jfriend00/hmP5M/ e puoi testare tutti i browser che vuoi usando quel jsFiddle. Basta cliccare sull'immagine per farla caricare una nuova immagine. Passa in rassegna tre diverse immagini (impostando .src ogni volta), caricandone due in modo univoco ogni volta (mai dalla cache) e uno dalla cache per testare entrambi i casi. Emette un messaggio sullo schermo ogni volta che viene chiamato il gestore .load, così puoi vedere se è chiamato.