Categorized | código, css

Precargar imagenes con CSS

Una buena (y accesible) opción siqueremos evitar sobrecargar el servidor con elementos javascript es la de añadir por medio del lenguaje CSS la precarga de aquellas imágenes que necesitemos para la página, normalmente para utilizarlas como reemplazos en el hover. Podríamos añadir un código como este a nuestro archivo CSS:


a { background: url(image_hover.gif); }
a:link { background: url(image_default.gif); }
a:hover,
a:focus { background: url(image_hover.gif); }

Y ya que hablamos de imágenes y CSS otra opción muy vistosa es la de utilizar una pequeña imagen para que se muestren mientras las imágenes se van cargando en la página, como por ejemplo esta:

Loading

Para ello sólo tenemos que añadir en nuetsro archivo CSS el siguente código y añadir la clase preload a las imagenes en las que queramos dar una sensación de ‘precarga’.


img.preload {
border: 1px solid #000; /* Borde opcional, si no lo queremos basta con borrar la linea o ponerlo a cero */
background: url("/ruta_de_la_imagen/loading.gif") no-repeat center center;
}

1 Comments For This Post

  1. katherine Says:

    Hola, lo que pasa es que se me cayo el portable y ahora no suena….estoy muy preocupada…quisiera saber si alguien me puede ayudar con este asunto……mil gracias!

Leave a Reply