[xhtml/css] Problema caricamento immagine

[Gino+89+]

Ciao a tutti...
Sto facendo un sito in xhtml/css.

Utilizzo i css, il problema è quì:

td{ 
            /*   ...    */

            background-image: url(img1.jpg);
}

td:hover{
            /*   ...    */

            background-image: url(img2.jpg);
}

Mi spiego meglio:
1) La pagina html viene caricata con tutti i suoi contenuti, e con "img1" come sfondo del td. E fin quì ok
2) Se passo con il mouse sull'immagine ( img1 ) questa scompare e viene visualizzata un'immagine come la precedente ma ingrandita (un'altra, img2), grazie alla proprietà hover di td.
Il problema e che per caricare l'altra immagine ci mette tipo 4 secondi, nel frattempo viene visualizzato un "frame" bianco (lo sfondo della pagina).

Non c'è un modo per far caricare l'immagine (quella che viene visulalizzata solo al passaggio del mouse, img2) insieme a tutte le altre? Anche se alla fine non viene visualizzata subito nella pagina?

Grazie
Gino89

[hurricane81]

Potrebbe essere la pesantezza dell'immagine. Cerca di ridurre la sua dimensione (intendo i byte).
Ciao!

[Gino+89+]

risolto con un preload in javascript, grazie mille comunque!

[thehuge]

Originariamente inviato da Gino+89+

risolto con un preload in javascript, grazie mille comunque!

Ti consiglio vivamente di usare gli sprites.
In questo modo viene fatta una sola richiesta HTTP per l'immagine (con evidente risparmio di tempo per il caricamento) e non è più necessario JavaScript (almeno per questa operazione).