Precargar imágenes con css rollover

Bueno, pues esto no tiene nada que ver especificamente con wordpress, pero justo necesitaba hacerlo y quería compartirlo. Tenemos varias formas de hacer rollover y que cambie una imagen. Para mí, la más cómoda sin duda es mediante css, adjudicandole un background-image:url();

Pues para evitar el dichoso parpaedo de la primera vez que se pasa por encima, nada tan sencillo como lo siguiente:

Metemos en un div los estilos del background

<style type='text/css'>
#preloader {
  /* la lista de imágenes a cargar */
  background-image: url(URL_imagen_1);
  background-image: url(URL_imagen_2);
  background-image: url(URL_imagen_3);
  /* y ocultaremos todo */
 
  display: none;
 
}
</style>

y ponemos ese div en nuestra página

<div id="preloader"></div>

De esta forma ya quedan las imágenes precargadas y no hay parpadeo 🙂

Add Comment

Required fields are marked *. Your email address will not be published.