Mostrar un gráfico mientras se cargan las imágenes con css
Noviembre 17th, 2007 | Publicado por Francisco en CSS, Diseño | 8 Comentarios
Uno de los elementos que más tardan en cargar en cualquier sitio web o blog son las imágenes y hay que tener un especial cuidado cuando el contenido depende mucho de ellas. Algo que puede ayudar cuando manejamos imágenes de alta calidad (por tanto más pesadas) es incluir un pequeño gráfico que indique que las imágenes están siendo cargadas y esto puede conseguirse en pocos pasos con css.
El método se basa en usar una propiedad aplicable a la gran cantidad de etiquetas html: el background o fondo, colocando como fondo la imágen de precarga a la etiqueta correspondiente a la imágenes, es decir, a img de este modo:
img {
background: transparent url(imagen-precarga.gif) no-repeat center center;
}Donde imagen-precarga.gif es la ruta (dirección) completa de la imagen a mostrar durante la precarga y bien puede obtenerse con un generador en linea.
Para el caso de Blogger este código bien puede ir justo antes de la etiqueta “]]></b:skin>”.Y en wordpress, en la hoja de estilos externa comúnmente llamada “style.css”.
Esto puede ser útil cuando el protagonista de nuestro sitio son las imágenes, como es el caso de los photologs.
Noviembre 17th, 2007 a las 1:09 pm (#)
no me funciono, la imágen me aparece en la sidebar :S que pasa?
Noviembre 20th, 2007 a las 5:36 am (#)
Hola…
Pero esta técnica no es muy buen para las imágenes png transparentes ya que transparentan y pues se ve la imagen de carga atrás de la imagen… Y pues en muchos casos se ve feo eso…
Noviembre 20th, 2007 a las 4:09 pm (#)
Muy buena idea.. seguro que la voy a utilizar en varios de mis proyectos.
Noviembre 23rd, 2007 a las 12:15 am (#)
Hola!
Mauricio, para limitar que solo aparezca en el area de los post, puede usarse:
.post img { … }
Nemesis, no había pensado en eso y tienes razón, igualmente cuando se lance css3 se podrá limitar su aparición a formatos que no usen transparencia, como el jpeg.
Un saludo!
Noviembre 24th, 2007 a las 6:24 pm (#)
¿donde es que tengo que poner el link a la imagen que quiero que aparezca? Y en wordpress en que parte de la hoja de estilos style.css tengo que colocarlo?
Saludos
Noviembre 25th, 2007 a las 5:18 pm (#)
yo lo puse despues de esto
body { background-color:#fff;font-family:Arial, Helvetica, sans-serif;}
es preferible poner una imagen de carga pequeña para que no afecte a los gif o png
Noviembre 30th, 2007 a las 3:41 pm (#)
Spaceghost, en “imagen-precarga.gif” tienes que poner la dirección completa de la imagen, y puedes poner el código a principio o al final de tu hoja de estilos.
ObservadorWeb, claro, es otra muy buena opción!
Saludos!