Un preloader in puro CSS

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?