Corsi on-line

Preloader di immagini con CSS

A volte è necessario caricare delle immagini nella cahe del browser prima di utilizzarle (come, ad esempio, quando si utilizza la tecnica del rollover).
Così facendo le immagini pre-caricate saranno immediatamente disponibili al momento del loro utilizzo senza attendere il tempo di download del file (che potrebbe comportare qualche istante di “bianco”).

Per fare il preloading delle immagini, normalmente, si ricorre a Javascript… ma è possibile ottenere il medesimo risultato anche utilizzando del semplice codice CSS.

#ImgPreload {
width: 0px;
height: 0px;
display: none;
background-image: url(cartella/img1.gif);
background-image: url(cartella/img2.gif);
background-image: url(cartella/img3.gif);
background-image: url(cartella/img4.gif);
background-image: url();
}

Subito dopo il tag <body> sarà, ovviamente, necessario richiamare il selettore:

<div id="ImgPreload"></div>

Il codice proposto non fa altro che caricare in sequenza una serie di immagini all’interno di un DIV nascosto e, quindi, anche nella cache del nostro browser.

Post correlati
I più letti del mese
Tematiche