Cargando imágenes con CSS
Actualmente ha proliferado el uso de AJAX para cargar contenido sin necesidad de refrescar el browser. Se ha hecho mas fácil con el amplio abanico de toolkits existentes, fáciles de usar e integrar, y gratis. En este momento mostraré un truco para mostrar la carga de una imagen a través de un simple GIF animado; en realidad puede ser cualquier mensaje que estimes conveniente, siempre que sea una imagen liviana (no más de 2KB).
Lo que se hará es crear un estilo para el tag IMG, y dentro de este estilo poner de fondo el GIF que tendrá un cargando. Es importante que todas las imágenes que se carguen sean mayores que el mismo GIF; si no estás seguro de esto, mejor crea una clase para el IMG y utilízado en todas las fotos, por ejemplo (diferenciando fotos de imágenes…. fotos digo a por ejemplo, una galería de fotos). A continuación, el código de lo más simple:
img.foto {
border: 1px solid #000;
background: url("cargando.gif") no-repeat center center;
}
El borde es opcional, se lo puse solamente para delimitar la foto. En el tag IMG, utilicé una class="foto" para que el background de la misma sea un GIF animado que emula la progresión de una carga. Esto es útil para fotos pesadas, galerías por ejemplo. Para que este GIF esté centrado, nada más obvio que center center (centrado horizontal y vertical).
Un interesante link, una página donde puedes crear tus propios indicadores en GIF animado.
