Capita spesso che si ha la necessita di pre-caricare delle immagini all’interno della pagina web in maniera da averle disponibili nel momento di bisogno. Ad esempio, se realizziamo un menu in cui al passaggio del mouse bisogna evidenziare la voce del menu con una diversa immagine di sfondo; se non pre-carichiamo le immagini, la prima volta che si passa il mouse sul menu non vedremo l’immagine di hover perchè bisogna ancora caricarla.
Per risolvere questo problema in rete ci sono centinaia di articoli che mostrano come pre-caricare le immagini senza dover ricorrere al Javascript ma con il solo ausilio del CSS. La tecnica è molto semplice, supponendo di avere 5 immagini da caricare, si realizzano 5 div all’interno della pagina che avranno come background le immagini in questione.
Avremo quindi qualcosa di questo genere:
1
2
3
4
5
.preloader1 { background: url('images/image01.jpg') no-repeat -9999px;
.preloader2 { background: url('images/image02.jpg') no-repeat -9999px;
.preloader3 { background: url('images/image03.jpg') no-repeat -9999px;
.preloader4 { background: url('images/image04.jpg') no-repeat -9999px;
.preloader5 { background: url('images/image05.jpg') no-repeat -9999px;
In questa maniera le immagini vengono caricate e sono disponibili nel momento in cui passiamo il mouse sul menu. Uno degli svantaggi di questa tecnica (lo svantaggio più pericoloso lo vedremo al termine dell’articolo) è dato dalla necessità di creare un div per ogni immagine.
Grazie al CSS3 però possiamo evitare di creare un div per ogni immagine, limitandoci a crearne uno soltanto.
I background multipli
Una delle novità introdotte nella specifica del CSS3 sono i background-multipli grazie ai quali possiamo assegnare più di un’immagine di sfondo ad un solo elemento. Possiamo sfruttare questa tecnica per caricare tutte le immagini in un solo div rendendo il tutto più semplice e, soprattutto, più pulito sia all’interno del CSS (minor numero di regole) sia all’interno dell’HTML (minor numero di div di solo markup).
Il codice precedente, quindi, grazie alla proprietà background-multiple, diventa:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.preloader {
/*
I browser che non interpretano il background-multiple
leggeranno questa regola
*/
background: url('images/image01.jpg') no-repeat -9999px;
/* I restanti browser questa */
background: url('images/image01.jpg') no-repeat -9999px,
background: url('images/image02.jpg') no-repeat -9999px,
background: url('images/image03.jpg') no-repeat -9999px,
background: url('images/image04.jpg') no-repeat -9999px,
background: url('images/image05.jpg') no-repeat -9999px;
}
In questo modo, quindi, creando un solo div e una sola regola CSS avremo lo stesso risultato.
Svantaggi dell’image preloader
Questa tecnica però non presenta solo vantaggi. In primis non bisogna dimenticare che la specifica del CSS3 non è ancora in versione definitiva e che Internet Explorer ignora del tutto i background multipli.
Il problema principale però è lo stesso che affligge l’image preloading con i div multipli, ovvero il peso delle immagini. Questa tecnica va utilizzata con le pinze e solo per le immagini di cui strettamente si necessita perchè se le immagini sono molte o molto grandi si appesantisce la pagina e di conseguenza il suo caricamento viene rallentato anche di molto.
Bisogna quindi fare molta attenzione alle immagini che vengono caricate.
Conclusioni
Abbiamo visto che grazie ai background-multipli ancora una volta si riesce a rendere più pulito il nostro codice con le novità del CSS3. Le novità introdotte da questa nuova specifica sono sicuramente molto interessanti da sperimentare nell’attesa che possano essere utilizzate nei progetti di tutti i giorni.
Pacman
Nostradamus
Magical Cat Adventure
Snake