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.
Comentarios
[…] 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. […]
[…] El ajax de los pobres o una solución a los problemas de cross-browsing. […]
jejeje que ingenioso
Nuy bueno tu blog
un saludo
¿Deja Vù?
Estupendo blog… ¡Enhorabuena!
Un cordial saludo
Muy bueno… me ha venido muy bien. Gracias
muchas gracias por el dato del precarga de imagen. 😉
muy buen dato.
slds!
http://foro.powers.cl/viewforum.php?f=6
Muy bueno, es bien creativo!!! Muchas gracias.
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
Sencillo, ingenioso y sin echar mano a ninguna línea de JavaScript.
Felicitaciones muy bueno el sitio.
Saludos desde Argentina.
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.
Muy buen tutorial. 😀
excelente tuto
bastante practico
[…] 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 […]
Excelente Ejemplo Felicitaciones por su aporte tan valioso!
cabeto
http://www.ciberdix.net
que recontra chuchon jajaja la verda yo usaba otra cosa pero esta solucion es tan sencilla que simplemente me parece genial
El link con la galería de cargadores ya no funciona, por lo demás muy bueno el tip.
Saludos 😀
Toda la razón Pepe, este articulo es muuuy viejito (julio 2006)… actualice a otro link q si uso aun. Saludos y gracias.
[…] Fuente | CSSLab […]
excelente aporte… un truco muy bueno
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
me podeis decir paso a paso i con todo. porfi
esta interesante
Excelente aportacion amigo, gracias
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!!
Lo probare en mi web parece interesante
Interesante lo usare en mi web de videos
Es necesario para toda web 2.0 en donde el marketeo esta en los estilos
mi correo es el_ver_58@hotmail.com
Excelente ejemplo, es justo lo que anda buscando para editar mi página, sigue asi, saludos.
Gracias por la ayuda