Precargar imágenes en el blog utilizando un icono de carga

Todos sabemos que tanto los blogs y las webs tardan su tiempo en abrirse. Algunos más que otros, variando en el número de elementos que el navegador necesita mostrar.

Las imágenes son algo que suele ralentizar el blog, sobre todo en la portada y según el tamaño de que tengan.

Con este truco podrás mostrar un icono de "carga" mientras las imágenes del blog se abren...

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta ]]></b:skin> y encima pega este bloque de CSS:

.blcargando {
background: url(URL DE TU IMAGEN) no-repeat center center;
}

Reemplaza URL DE TU IMAGEN por la dirección del icono o imagen .gif que quieres mostrar ^[+].

Ahora guarda la plantilla:




Seguidamente dirígete a una entrada cualquiera en la que quieras mostrar la imagen con "precargado".

Pega esta línea:

<img src="URL DE LA IMAGEN" class="blcargando"/>

Sustituye URL DE LA IMAGEN por la dirección de la imagen que quieres mostrar en el post ^[+].

Publica la entrada y listo.

Notas:

Para no estar copiando la línea que inserta la imagen con la imagen de carga, puedes hacer uso de la plantilla de entrada que ofrece blogger.

Puedes encontrar iconos gif de carga utilizando Google o en Load Info, un sitio muy curioso en el que además será posible personalizarlos.