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
10 anni 24 settimane fa
11 anni 29 settimane fa
12 anni 45 settimane fa
12 anni 46 settimane fa
13 anni 35 settimane fa
13 anni 36 settimane fa
13 anni 46 settimane fa
13 anni 50 settimane fa
14 anni 1 settimana fa
14 anni 6 settimane fa