Francesco Mele .com

Una delle prime funzioni javascript che ho dovuto imparare ad usare è quella relativa al preload delle immagini.

Se, per esempio, occorre modificare un'immagine sull'evento 'onmouseover' occorre che la seconda immagine sia precaricata dal browser, altrimenti il browser invia una richiesta al server che risponde coi suoi tempi introducendo un ritardo fastidioso nell'effetto. Se i tempi poi sono relativamente lunghi l'utente allontana il mouse dall'immagine (evento 'onmouseout') e l'effetto si perde.

In rete si trovano mille funzioni javascript per far caricare le immagini al browser all'apertura della pagina, tutte abbastanza simili, ma esiste un altro metodo, molto più semplice, che non fa utilizzo di javascript; infatti utilizza i CSS.

Il trucco è quasi banale: basta inserire un div con le immagini che si vogliono caricare e nasconderlo dalla porzione visibile della pagina:

<div style="position:absolute;top:-1000px;left:-1000px">
<img src="images/seconda_immagine.gif"/>
<img src="images/cambio_sfondo_pulsante.gif"/>
</div>

Come potete notare ho inserito nello stile del contenitore la posizione assoluta "sparando" il div in alto a sinistra, lontano dalla pagina (top e left sono negativi). In questo modo il browser carica comunque le immagini senza che queste siano visibili all'utente.

N.B. Non è possibile utilizzare la proprietà di stile 'visible:hidden' perché il browser non avrebbe caricato i contenuti interni, rendendo il trucchetto inutile.