Utilizar un loading o imagen de carga con CSS

No hay nada mejor que hacer saber al usuario cuando está esperando algo para no impacientarlo, y aunque una animación simple no le informa del progreso exacto o del tiempo que tendrá que esperar, muchas veces es suficiente para retener al usuario en tu página y evitar que se marche pensando que el sitio web no funcionaba.

Una manera muy simple de indicar que una imagen o cualquier otro elemento aun no se cargó es colocar en su lugar una imagen de fondo animada que nos de la sensacion de que ese elemento está descargandose.

Para ello aquí un truco muy sencillo, poner de fondo del elemento una imagen animada muy ligera, para que no añada un exceso de carga a la página web, pero que indique al usuario que la página sigue funcionando.

El código necesario para hacer el loading es el siguiente:

img {
  background:transparent url(images/ajaxload.gif) center no-repeat;
  }

Con este código la imagen animada (imagen de fondo) se mostraría en todas las imágenes que estén cargandose en tu web.
Eso es, así de sencillo, con este simple código a todas las imagenes del sitio le colocamos nuestra animación de fondo. Cuando la imagen principal se haya cargado dejará de ser visible, mientras se esté descargando le damos al usuario mayor sensación de continuidad, pareciendo más evidente que la página sigue activa.

Pero como esto puede resultar innecesario usarlo en todas las imágenes de una página web, ya que hay muchas imágenes pequeñas que cargan rápidamente, otra forma es crear una clase CSS que se podrá utilizar en las imagenes grandes (muy pesadas) que usemos en nuestra web, y para las que sí resulta útil añadir un efecto como este puesto que es posible que el usuario tenga que esperar unos segundos para ver la imagen:

.precarga {
    background:transparent url(images/ajaxload.gif) center no-repeat;
 }

Y para que la imagen de fondo aparece como la queremos, tenemos que añadir la anchura (width) y la altura (height) de las propiedades de la imagen, mediante estilos CSS en un div que rodee la imagen:

<div style="width: 140px; height: 120px" class="precarga">
	<a href="tp://www.paginaweb.com/>
		<img src="http://www.paginaweb.com/" alt="texto descriptivo" border="0" />
	</a>
</div>

Para conseguir la imagen de fondo a mostrar mientras se carga la imagen de la web, hay páginas muy buenas que nos hacen el trabajo:

• Ajax Load: esta herramienta online te permite crear imagenes de carga animadas, ya sea para el tema que estamos tratando o para el uso que se te ocurra. Te permite personalizar los colores y el tipo de animación. Muy recomendable. Un ejemplo:
  
• Preloaders: esta otra herramienta hace lo mismo que la anterior, solo que te crea imágenes animadas en 3D. También puedes personalizar colores y tipo de animación. Un ejemplo:
  

También puedes usar Ajax para lograr este tipo de efecto.