Imagen de espera mientras se carga una imagen

Muchas veces en nuestras páginas se cargan imágenes realmente pesadas y no tenemos forma de avisar al visitante. Aquí les dejo un truco que encontré por ahí que permite mostrar una imagen de fondo, que luego será tapada por aquella que se está leyendo:

img {
background:  transparent url(imagen-precarga.gif) no-repeat center center;
}

Se recomienda el uso de una pequeña imagen que indique la espera para lograr que el navegador la cargue rápidamente.

Si bien es un truco interesante, encontrarán una dificultad con las imágenes transparentes, pues puede que la imagen de fondo no sea totalmente tapada. Pero para la mayoría de las que usamos en la web, esta técnica es útil.

Otra opción sería restringir el uso de esta técnica a las imágenes que se muestran dentro de determinados elementos. En el siguiente ejemplo sólo se usará la imagen de fondo en los tags IMG que sean hijos de un elemento cuya clase CSS sea album:

.album img {
background:  transparent url(imagen-precarga.gif) no-repeat center center;
}