CSS Diseño

Mostrar un gráfico mientras se cargan las imágenes con css

imagen-precarga.gifUno 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.

Deja un comentario

9 Comentarios

  • […] Siempre salen nuevas técnicas para el diseño de nuestra web o blog, puedes ver como insertar un gráfico de precarga para tu imágenes. […]

  • 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…

  • 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!

  • ¿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

  • 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

  • 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!