Un preloader in puro CSS
Mercoledì 23 Gennaio 2008 - 08:24
di Gianluca Brindisi
Vi siete mai trovati a dover aspettare il caricamento di un immagine di sfondo, in seguito ad un :hover sull’elemento? In tutta sincerità a me non è mai capitato, però ammetto che lo scenario è verosimile e forse ci sono situazioni in cui sarebbe opportuno ammazzare il tempo di caricamento con un preload.
Su CSSJuice è stato pubblicato un piccolo tutorial al riguardo. Viene illustrato il modo di gestire il preloader attreverso i soli CSS, senza dover ricorrere a linguaggi di scripting.
Il trucco consiste nel dichiarare l’immagine del preloader (la classica ruota che gira, ad esempio) come sfondo di un div nascosto in modo da caricarla in anticipo nella memoria del browser, e la tecnica è espandibile ridefinendo la proprietà background per ogni immagine necessaria:
div .loader{
background:url(images/hover.gif) no-repeat;
background:url(images/hover2.gif) no-repeat;
background:url(images/hover3.gif) no-repeat;
background:url(images/hover4.gif) no-repeat;
margin-left:-1000px;
}
Personalmente ritengo che utilizzando gli sprite non avremmo neppure da porci certi problemi, però questo trucco di ridefinire il background mi è rimasto impresso e forse potrebbe risultare utile applicato in altri contesti… Qualcuno ha delle idee?
Commenti
1
sicuramente permette, come hai detto, di evitare l’uso di javascript per il preload.
Per il resto è un normale utilizzo dei css.Se, però, si usa immagini “doppie” in cui sull’hover si sfrutta la proprietà background-position spostando l’immagine si ottiene lo stesso effetto senza ricorrere a preload. Poi dipende anche dal peso delle immagini che si gestiscono…
2
Concordo con Paolo; secondo me non serve un preload se si usano immagini doppie e ben ottimizzate. Basterebbe intervenire sul background-position e non appare nessun ritardo al rollover.
3
ma, ehm… funziona? a vedere quel codice immaginerei che il browser scarti tutte le definizioni di background tranne l’ultima…
e poi non mi piace :p
# - postato da NoWhereMan - 23 Gennaio 2008 - 11:03
4
@NoWhereMan
E’ quello che ho subito pensato anch’io.
Diciamo che se funziona si tratta di un bug e costruire funzionalità utilizzando i bug non è certamente una cosa bella o sicura per il futuro.
Un metodo sicuro sarebbe utilizzare un div o un elemento per ogni background, ma così si sporca molto il codice, oppure i background multipli dei CSS3 per i browser che li supportano.# - postato da Riot - 23 Gennaio 2008 - 11:23
5
diciamo che i css non fanno preoccupare i classici preload js.
6
margin -1000.
rischi di ban per div “nascosti”?# - postato da smshot è una sola - 24 Gennaio 2008 - 00:39
7
@smshot….
Parecchi……Google non ama le cose nascoste o colorate con il colore dello sfondo.
L’alternativa, comunque, è uno ciclo php o simili nel css oppure un onload(….).
In entrambi i casi, non è il massimo…..# - postato da Ratamusa - 24 Gennaio 2008 - 12:01
8
Concordo con chi dice che sia meglio un’unica immagine da posizionare sull’evento :hover tramite css, si evitano problemi di caricamento e funziona benissimo.
Per quanto riguarda il margine negativo dubito che ci siano rischi di ban da parte di Google, altrimenti le varie tecniche di image replacement sarebbero tutte (o quasi) inutilizzabili.
9
alcilà del fatto che funzioni o meno non è un buon metodo da usare… dichiarare 10 background diversi in un div nascosto mi sembra il massimo della logica :)