Efecto Cargando con CSS
¿Te gustaría mostrar tus imágenes con este efecto, hasta que terminen de cargar?
Para hacerlo es muy simple y como siempre nos ayudaremos con nuestro amigo CSS.
Para generar este truco sólo debemos agregar la imágen como background, de modo que cuando la imágen termine de cargar, esta quede debajo y no sea visible.
Utilizaremos la class "entry", que es la clase por defecto en WordPress, si usas otro sistema, sólo deberás cambiarla.
El CSS necesario para el efecto es este:
.entry img {background: url(http://img130.imageshack.us/img130/2134/ajaxloader.gif) no-repeat center center}
Ahora, sólo debes entrar a alguna entrada donde tengas imágenes que pesen harto, para que puedas observar el efecto, si quires un ejemplo, entra aquí.
04/12/2009
Post Relacionados
10 Comentarios en “Efecto Cargando con CSS”
Deja un Comentario
Additional comments powered by BackType
Diciembre 4th, 2009 a las 10:23 pm
Información Bitacoras.com...
Valora en Bitacoras.com: ¿Te gustaría mostrar tus imágenes con este efecto, hasta que terminen de cargar? Para hacerlo es muy simple y como siempre nos ayudaremos con nuestro amigo CSS. Para generar este truco sólo debemos agregar la imágen como back.....
Diciembre 4th, 2009 a las 11:28 pm
Un excelente detalle para precargar las img, muchas gracias
Diciembre 5th, 2009 a las 11:59 am
[...] This post was mentioned on Twitter by blogs, JuanK. JuanK said: [Post] Efecto Cargando con CSS http://kl.am/5mqF [...]
Diciembre 5th, 2009 a las 3:36 pm
@DoctorPC: de nada
Espero que te sea útil :B
Nos vemos!
Diciembre 10th, 2009 a las 2:13 pm
Hola, queria invitarte a que agregues tu blog a planetachileno.cl
es un directorio de webs y nos gustaría que estuvieras.
saludos
Diego
Diciembre 12th, 2009 a las 2:07 pm
Gracias por el dato, nunca pense que fuera tan fácil de hecho voy a trabajar en cambiar las imagines que tengo para que aparezca y así se mire mucho mejor mi página que valla y me ha costado trabajo.
Saludos
Paola
Diciembre 28th, 2009 a las 5:57 pm
[...] en el blog hemos escrito algunos artículos sobre CSS y las imágenes, como por ejemplo el efecto cargando e imágenes [...]
Enero 9th, 2010 a las 8:05 am
Pues está muy bien este truco.
Yo siempre que veía estos precargadores, creía que era ajax.
Marzo 23rd, 2010 a las 5:47 pm
[...] el lugar de la imagen original antes de cargarla. Podemos usar la misma imágen que usamos en el efecto cargando que hacemos con [...]
Junio 7th, 2010 a las 1:10 pm
Muy interesante efecto, creo que me puede venir util para mi proyecto. Gracias