Css - Preload delle immagini

January 14th 2010 by Paolo Bindi in: Css | Tags: Css

Usando i fogli di stile CSS, invece che Javascript, siamo sicuri che nessun browser, eventualmente bloccato dall'utente nell'esecuzione di questo tipo di script, renda vano il lavoro svolto.

La tecnica si basa sull'utilizzo della proprietà DISPLAY, indicando al browser di richiedere l'immagine, ma non di visualizzarla. In questo modo quindi l'immagine verrà caricata nella cache e utilizzata poi in seguito, quando verrà richiamata dalla pagina.

Occorre creare una classe CSS di questo tipo

<style type="text/css">
    .hiddenImages {display:none;}
</style>

Quindi, nella pagina principale, scrivere questo codice per ognuna delle immagini che si vogliono caricare in cache con questo meccanismo

<img src="images01.jpg" alt="images01" title="images01" class="hiddenImages">
<img src="images02.jpg" alt="images02" title="images02" class="hiddenImages">
<img src="images03.jpg" alt="images03" title="images03" class="hiddenImages">
<img src="images04.jpg" alt="images04" title="images04" class="hiddenImages">

Chiaramente non ocorre esagerare con la quantità delle immagini caricate, altrimenti si avrà l'effetto contrario, proprio sulla pagina iniziale.

Nel caso che riscontrate qualche errore o se volete contattarmi per qualche consiglio o suggerimento, utilizzate la form della sezione contatti