jQuery modifica <img> src con $ (selettore) .prop richiede molto tempo

Question

Quindi non c'è alcun problema con questa funzionalità del codice stesso. Ho qualcosa di simile:

<div> 
    <div><img id="imageToChange" src="/path/image.png" /></div> 
    <div id="textToChange">Text</div> 
</div> 

ho un'altra parte del mio codice, che cambia l'immagine src/testo con jQuery.

Come ci si può aspettare, questo funziona esattamente come mi aspetto. Ma con 1 stranezza.

In tutti i principali browser (chrome/FF/IE). L'immagine impiega molto tempo per cambiare.

Ad esempio, quando chiamo changeImage(), il testo cambierà istantaneamente, ma l'immagine potrebbe non cambiare fino a 1-2 secondi dopo. (Non grandi immagini di qualsiasi lunghezza, circa ~ 6KB e locale)

Non ho trovato nessun altro che si lamentasse veramente, ma quello che mi chiedo è se c'è un modo per accelerare il cambiamento dell'immagine src? Forse un modo migliore per farlo?

Questo è jQuery 1.8.0 pure.

Grazie

Answer 1

Ho visto questo comportamento prima. Il ritardo è causato dall'immagine non memorizzata nella cache e dal tempo di caricamento successivo. Le uniche soluzioni che conosco:

1. Precaricare le immagini con JavaScript Oggetti immagine.
2. Gestire load event sull'immagine e aggiornare il testo dopo l'immagine caricata. Nota jQuery sono elencati alcuni problemi a cui fare attenzione:

Avvertimenti della manifestazione carico quando usati con immagini

una sfida comune gli sviluppatori cercano di risolvere con il .load() scorciatoia è quella di eseguire un funzione quando un'immagine (o collezione di immagini ) è stata caricata completamente.Ci sono molti avvertimenti noti con che dovrebbe essere notato. Questi sono:

• Non funziona in modo coerente né affidabile cross-browser
• E non si attiva correttamente in WebKit se lo src dell'immagine è impostata la stessa di prima src
• non lo fa correttamente bolla l'albero DOM
• può cessare di sparare per le immagini che già vivono nella cache del browser

http://api.jquery.com/load-event/

Answer 2

è probabile che il tempo di caricamento delle immagini. se questo è il caso, caricare l'immagine la prima volta dovrebbe essere l'unica lenta. un carico di follow-up, dopo aver cambiato l'immagine in qualcos'altro, sarebbe stato veloce.

$('#imageToChange').prop('src', '/path/image1.png'); 
//slow, need to fetch image 
$('#imageToChange').prop('src', '/path/image2.png'); 
//slow, need to fetch image 
$('#imageToChange').prop('src', '/path/image1.png'); 
//fast, it already has this image 

Come soluzione, è possibile provare il pre-caricamento delle immagini. O, meglio ancora, utilizzare css sprites.

Answer 3

quando si modifica lo src dell'immagine si preleva un altro file di immagine. fa una richiesta HTTP per la nuova immagine, quindi deve essere caricata prima di mostrarla. potrebbe essere?

btw, per questo motivo è possibile precaricare l'immagine con js. o aggiungere

<img src="path/to/image.jpg" style="display: none" /> 

al vostro HTML o utilizzando JS

var im = new Image(1,1); 
im.src = "path/to/image.jpg"; 

in questo modo l'immagine verrà memorizzata nella cache

Answer 4

È il ritardo della rete. Prova questo:

<div> 
    <div><img id="imageToChange" src="/path/image.png" /></div> 
    <div id="textToChange">Text</div> 
</div> 
<img src='/path/image2.png' style='display:none'> 

Answer 5

È possibile precaricare l'immagine utilizzando l'oggetto Immagine Javascript.

Nella testa del documento messo

<script type="text/javascript"> 
    img2 = new Image(); 
    img2.src = "/path/image2.png"; 
</script> 

Answer 6

Si consiglia di provare alterare l'attributo utilizzando la funzione di jQuery .attr. Se ricordo correttamente il tag src di un'immagine è un attributo non una proprietà. Sebbene sia lo .prop sia lo svolgano relativamente la stessa funzione, al fine di garantire un comportamento coerente tra i browser è preferibile utilizzare il tag .attr.

$('#imageToChange').attr('src', '/path/image2.png'); 

Per quanto riguarda il ritardo, ciò potrebbe essere dovuto alla dimensione dell'immagine. Il browser deve fare una richiesta GET al server per l'immagine e quindi dipingere il DOM con esso. Se l'immagine è grande, potrebbe causare un intervallo di tempo tra il momento in cui il codice cambia la sorgente e quando la nuova immagine viene scritta correttamente nel DOM. Se l'immagine è di grandi dimensioni, puoi prendere in considerazione la possibilità di ridimensionarla o ottimizzarla per l'utilizzo web.

Spero che questo aiuti.