come precaricare un immagine?

[blekm]

ho un logo, praticamente una scritta dentro un immagine da 5k.. quando vi passo sopra col mouse, cambia l'immagine, ne carica una uguale ma di colore diverso. Solo che la prima volta che faccio l'hover ci mette un secondino prima di apparire la seconda immagine.

Poi, non si presenta più questo problema, perchè ormai l'immagine è in cache.

Come evitare questo buco iniziale? Esiste una maniera di caricare subito anche la seconda immagine? Magari non farla vedere.. :master:

[gengix]

Si esiste un piccolo trucco e tra l'altro è consigliabile utilizzarlo sempre.

Ti faccio l'esempio di un bottone allegandoti delle immagini.

Btn.jpg è come appare il mio bottone nello stato normale.
BtnHover.jpg è come appare il bottone al passaggio del mouse.
La larghezza di entrambe le immagini in questo caso è di 60px e l'altezza di 20px

Quello che devi fare è unire le immagini, come ti mostra btnDef.jpg.

Nel css devi dichiarare queste regole:

a{
display:block;
width:60px;
height:20px;
}
a:link, a:visited{
background: url(btnDef.jpg) no-repeat left top;
}
a:hover{
background: url(btnDef.jpg) no-repeat right top;
}

In pratica setto la larghezza del bottone equivalente a 60px anche se la mia immagine risulta larga il doppio.
Nello stato link e visited, la posizione di btnDef.jpg è tutta a sinistra, quindi viene visualizzata solo la parte di btn.jpg. Viceversa bello stato hover la posizione dell'immagine viene spostata tutta a dx.
In questo modo l'immagine viene caricata solo una volta e l'effetto rimane invariato, evitando fastidiosi sfarfallamenti

[blekm]

questo trucchetto funziona senza problemi? Vedrò di provarlo..

è la soluzione più usata in questi casi?

[gengix]

ti allego questa che li racchiude

[gengix]

Si è consigliata anche in qualche manuale, cmq vai sul sicuro, io la utilizzo sempre

[blekm]

ok, grazie. Proverò e ti farò sapere.

[blekm]

funziona

grazie e

[Emar]

con i css l'unica è questa altrimenti per precaricare un immagine nella cache del browser puoi usare javascript:

function LoadImage(img)
{
var image = new Image();
image.src = img;
} 

e richiamare cosi:

LoadImage("nome immagine");