Preload immagini in CSS e Html

Vi segnalo oggi una tecnica che ho appreso leggendo il blog tematico cssblog.it che permette ai webmaster di inserire un preload per le immagini pesanti del proprio sito.

Questa tecnica consiste nel forzare lo sfondo (background) del tag html IMG con una classe CSS apposita, in modo da inserire una gif animata al centro dell’immagine stessa. In questo modo, all’apertura della pagina, la gif animata sarà caricata prima dell’immagine vera e propria, e darà l’impressione di un preload nel mentre del caricamento dell’altra immagine.

Un esempio può essere visto cliccando qui

Questo accade grazie al fatto che il peso della gif animata è di pochi Kb, mentre l’immagine che vogliamo caricare ha un peso maggiore. Il caricamento della gif di preload sarà quindi più rapido e precederà quello dell’immagine originale.

Al termine del caricamento dell’immagine grande, la gif animata sarà completamente coperta e quindi invisibile agli occhi dell’utente.

Per sfruttare questa tecnica, dobbiamo andare a creare una nuova classe nel nostro foglio di stile CSS, in questo modo:

.loading { background: url(loading.gif) no-repeat center center; }

Successivamente, dobbiamo applicare la classe loading ad ogni immagine che ci interessa modificare con il preload:

<img src=”IMMAGINE” class=”loading” />

Nel caso in cui ci interessa inserire il preload a tutte le immagini del sito (come ho fatto io nel mio) senza dover applicare la classe loading ogni volta, possiamo modificare il foglio di stile CSS in questo modo:

img { background: url(Images/Style/loading.gif) no-repeat center center; }

Cosi facendo, il tag IMG assumerà di default le proprietà impostate nel foglio di stile CSS.

Riporto inoltre una pagina di Google Immagini in cui possono essere trovate un sacco di immagini utili da usare come preload: preload gif

Il mio suggerimento è quello di usare immagini di dimensione non superiore ad 1Kb per non inficiare il funzionamento stesso della tecnica.

Fonte Nealgrosskopf.com