Precargas para imágenes con CSS

Alma Fernández 03/06/2006

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

Cargando las imagenes 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 que pueden interesarte:

CSS, Codigo

Si te ha gustado este post no olvides suscribirte al feed para estar al tanto de las novedades

gabo dice:

30 Agosto 2007 en 4:31

ta chido, felicidades, amor!

Asun dice:

3 Febrero 2008 en 4:36

Bueno, muy bueno, sin embargo, si la imagen a mostrar tiene background transparente, entonces se ve la imagen de fondo de carga…

aNieto2K » Blog Archive » Precarga de Imagenes con CSS dice:

8 Junio 2006 en 2:03

[...] Ingenioso invento para precargar imagenes mediante CSS [Demo] (Via ikkaro) [...]

Webmaster Libre » Crea tus propios gifs animados para precargas en dos clicks dice:

22 Junio 2006 en 23:12

[...] Los gifs resultantes también pueden sernos muy útil si ponemos en práctica la técnica de precargas para imágenes con CSS que comentabamos el otro día. [...]

Un blog cualquiera » Truquito para precargar con CSS dice:

23 Febrero 2007 en 1:24

[...] He estado mirando enlaces y he encontrado este truquito que hace que puedas poner un gif de fondo en las imágenes para que se vea que se esté cargando. Queda un efecto muy chulo. Si quereis ver el efecto práctico seguir leyendo. [...]

Webmaster Libre | Fade de imágenes al cargar dice:

29 Marzo 2007 en 15:44

[...] Si eres de los que no se conforman con mostrar a tus usuarios un gif animado mientras cargan tus imágenes quizá te interese probar una alternativa mucho más espectacular: [...]

Pedro » Blog Archive » Fade de imágenes al cargar dice:

28 Mayo 2008 en 7:48

[...] eres de los que no se conforman con mostrar a tus usuarios un gif animado mientras cargan tus imágenes quizá te interese probar una alternativa mucho más [...]

Webmaster Libre