Precarga de imágenes

[humanista]

Hola, tengo un enlace con apariencia de botón como éste:

Código PHP:

  <a href='../signup/index.php' class='ari12ver' style='display:block; text-align:center; line-height:25px; background-image: url(../compartido/greybuttonbackground.jpg); width:100px; height:25px; font-weight: bold; vertical-align:middle; border-left:1px solid #787878; border-right:1px solid #787878; cursor:pointer;' onMouseOver="this.style.backgroundImage='url(../compartido/greenbuttonbackground.jpg)'; this.style.color='#FFFFFF'" onMouseOut="this.style.backgroundImage='url(../compartido/greybuttonbackground.jpg)'; this.style.color='#348910'"; text-decoration:none />Suscribirse</a> 
   

Vamos que lo que hace es simular un botón (aunque sea un enlace) y que al pasar el ratón por encima cambie el fondo del botón. Sin más.

El tema es que no precarga las imágenes por lo que tarda 1 segundo y pico en hacer el efecto "onMouseOver".

Creo recordar que esto se soluciona con una precarga de la imagen (background-image) no? Cómo se puede hacer?

Por cierto el background-image se repite, es simplemente una línea vertical de 1 pixel de ancho por 25 pixels de alto.

[ZiTAL]

puedes cargar todas las imagenes que quieras, las agrupas en un div oculto y listo:
<div style="display:none">
<img src="" alt="" />
<img src="" alt="" />
<img src="" alt="" />
<img src="" alt="" />
...
</div>

[furoya]

Este asunto se discutió muchas veces. Alguno de estos enlaces te debe servir (hay ejemplos como el de ZiTAL)

cargar una imagen del menu en css

Sprites css