Cargando imágenes con CSS

7/sep/2006 31

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).

Ver resultado final.

Un interesante link, una página donde puedes crear tus propios indicadores en GIF animado.

Comentarios

  1. links for 2006-09-08 en newdisco [#]

    […] CSSLab » Cargando imágenes con CSS Como usar CSS para mostrar la imagen de “cargando” o “loading” para imagenes varias. (tags: css loading tool hack howto) Archivado en: Links Diarios   |   Etiquetas: No Tags. […]

  2. El ajax de los pobres o una solución a los problemas de cross-browsing - aNieto2K [#]

    […] El ajax de los pobres o una solución a los problemas de cross-browsing. […]

  3. Sitoxic [#]

    jejeje que ingenioso
    Nuy bueno tu blog

    un saludo

  4. Alan Orozco [#]

    ¿Deja Vù?

  5. Tomate Maduro [#]

    Estupendo blog… ¡Enhorabuena!
    Un cordial saludo

  6. Miquel [#]

    Muy bueno… me ha venido muy bien. Gracias

  7. neutro [#]

    muchas gracias por el dato del precarga de imagen. 😉

    muy buen dato.

    slds!

    http://foro.powers.cl/viewforum.php?f=6

  8. Karito [#]

    Muy bueno, es bien creativo!!! Muchas gracias.

  9. MinimalNet [#]

    Que monada, me lo acabo de poner jeje estas cosas son las que hacen bonitas un blog, los pequeños detalles son muy importantes. Muchas gracias :)

  10. Daniel Ulczyk [#]

    Sencillo, ingenioso y sin echar mano a ninguna línea de JavaScript.
    Felicitaciones muy bueno el sitio.
    Saludos desde Argentina.

  11. fearlex [#]

    Excelente tutorial, buenisima, idea, lo unico que la imagen se despliegue de arriba hacia abajo, seria buenisimo que se desapareciera una ves cargada la imagen, pero creo que ya eso es con Javascript.

  12. J.v.C [#]

    Muy buen tutorial. 😀

  13. kanino [#]

    excelente tuto :) bastante practico

  14. Cargar imágenes al estilo Web 2.0 « Codeline [#]

    […] Web 2.0 Algunas veces la solución a un problema es más sencilla de lo que pensamos. En el blog CSSLAB, encontré un artículo que habla sobre cómo hacer el efecto de cargar imágenes usando solamente […]

  15. Carlos [#]

    Excelente Ejemplo Felicitaciones por su aporte tan valioso!

    cabeto
    http://www.ciberdix.net

  16. luis [#]

    que recontra chuchon jajaja la verda yo usaba otra cosa pero esta solucion es tan sencilla que simplemente me parece genial

  17. Pepe [#]

    El link con la galería de cargadores ya no funciona, por lo demás muy bueno el tip.

    Saludos 😀

  18. Jorge Epuñan [#]

    Toda la razón Pepe, este articulo es muuuy viejito (julio 2006)… actualice a otro link q si uso aun. Saludos y gracias.

  19. Splashlog! » Blog Archive » Cargando Imágenes con CSS [#]

    […] Fuente | CSSLab […]

  20. Cristian [#]

    excelente aporte… un truco muy bueno

  21. Lorena [#]

    Hola, no se que decir, pero no me sale el gif cargando… hay alguien amable que me deje un link para bajar el archivo html y css con el ejemplo asi me doy cuenta como es….

    Muchas Gracias. Besos

  22. xisco [#]

    me podeis decir paso a paso i con todo. porfi

  23. amenito [#]

    esta interesante

  24. jorge [#]

    Excelente aportacion amigo, gracias

  25. Alejandro Lodes [#]

    No lo recomiendo hasta que solucionen lo siguiente…

    Resulta que consume el 25% del procesador constantemente si se le amplica a una imagen que se redimensiona por css o por el tag

    es decir que si lo usas para cargar una miniatura de un jpg de 800×600 olvidalo!!

  26. Nestor [#]

    Lo probare en mi web parece interesante

  27. Juan [#]

    Interesante lo usare en mi web de videos

  28. Sistemas [#]

    Es necesario para toda web 2.0 en donde el marketeo esta en los estilos

  29. elver [#]

    mi correo es el_ver_58@hotmail.com

  30. carlos2524 [#]

    Excelente ejemplo, es justo lo que anda buscando para editar mi página, sigue asi, saludos.

  31. portatiles de segunda mano [#]

    Gracias por la ayuda

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab