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
December 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…..
December 4th, 2009 a las 11:28 pm
Un excelente detalle para precargar las img, muchas gracias
December 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 [...]
December 5th, 2009 a las 3:36 pm
@DoctorPC: de nada
Espero que te sea útil :B
Nos vemos!
December 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
December 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
December 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 [...]
January 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.