Precargas para imágenes con CSS
Marko Dugonjić nos dejó hace tiempo en su blog un pequeño truco que nos puede ayudar a informar a nuestros visitantes de que las imágenes están cargando (especialmente útil cuando combinamos imágenes grandes con conexiones lentas).
A continuación, os traigo la traducción del original Image Preloader
Al dividir los .PSD para dar estilo al código, generalmente los chicos y chicas del CSS comienzan con un juego genérico de reglas del tipo
* { margin: 0; padding: 0; }Después, crean algunas reglas adicionales
p, ul, ol, dl { margin-bottom: 1em; }para asegurarse de que todo tiene un margen por defecto. En este punto suelen dar estilo a los enlaces y a sus pseudo-clases correspondientes (:hover, :focus y :visited). Tras esta inicialización del CSS probablemente se sumergen en el estilo específico del sitio. Pero ¡espera! ¿Por qué no establecemos un sistema generico de notificación de precarga para las imágenes del contenido mientras estamos aquí?
¿Y por qué querriamos hacer eso?
Los visitantes que navegan con conexiones lentas han de esperar a que se carguen las imágenes y a veces ni siquiera saben que falta algo - simplemente ven un espacio en blanco entre dos bloques de texto. Si ofrecemos una prueba visual de que algo está pasando en la página web (la imagen está cargando y no se ha colgado nada) podrán estar seguros de que la imagen acabará mostrandose.
Animación de Fondo tras la Imagen de Contenido:
Sólo necesitamos una simple línea de CSS:
img { background: url(loading.gif) no-repeat 50% 50%; }y una animación GIF. Los GIFs son perfectos, ocupan poco y, en realidad, no necesitamos nada muy vistoso sólo queremos dar una pista a nuestros usuarios.
Preloader Universal
Si quieres utilizar este preloader universal, será necesario personalizarlo un poco. Con el mínimo posible de retoques en el CSS (cambiar el color de fondo del contenedor de la imagen) podremos reutilizar el mismo GIF. Aquí tenéis un ejemplo, una imagen GIF transparente muy práctica y reutilizable. Botón derecho y toda tuya.
El ejemplo mostrado no es nada revolucionario, pero es fácil de implementar y es un detalle de usabilidad en el interface. Ojea la página de demostración
Otras entradas
Esta entrada fue publicada por Alma Fernández el Sábado, 3 de Junio de 2006 y está archivada en: CSS, Codigo. Puedes dejar un comentario, o enviar un trackback desde tu sitio.
