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 imagen 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 las plantillas 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.