Preload delle immagini senza javascript
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.
- Login per inviare commenti
Commenti recenti
9 anni 31 settimane fa
10 anni 36 settimane fa
11 anni 52 settimane fa
12 anni 5 giorni fa
12 anni 42 settimane fa
12 anni 43 settimane fa
13 anni 1 settimana fa
13 anni 5 settimane fa
13 anni 8 settimane fa
13 anni 13 settimane fa