Precarga de imágenes con CSS

Es muy corriente el utilizar varias imagenes para un menu o un botón. Dependiendo del estado del elemento, este mostrará una imagen u otra. Dependiendo del tamaño de la imagen y de la carga del servidor, puede provocar que al cambiar de estado (el menú, botón, etc.) se requieran unos segundos para cargar la imagen, con el consiguiente fallo de visualización. Hace tiempo ya os explicamos en el artículo creación de un Sprite una técnica para cargar una única imagen y que esta se fuera posicionando según el estado del botón, para evitar este error en la carga de imagenes. Hoy os queremos mostrar otra técnica utilizando también CSS.

Se trata de hacer una precarga de imágenes y ocultarlas mediante CSS, con esto almacenaremos las imagenes en la caché del navegador, teniendolas de inmediato disponibles para cuando se requiera su uso. Para ello deberemos añadir al final de la página:

<img class="preload" src="url de la imagen" width="ancho" height="alto" />

Despues deberemos añadir en nuestro fichero CSS la entrada que se encargará de ocultar las imagenes precargadas:

<style type="text/css">
.preload {display: none;}
</style>

Esperamos que os sirva de ayuda.

Facebooktwittergoogle_plus