En esta ocasión paso a mostrarles una manera muy sencilla de crear un efecto loading o carga de imágenes mediante CSS, el cual nos puede ser muy útil para la presentación de ciertas imágenes dentro de nuestra web.

1. Debemos conseguir una imagen en formato GIF para usarla como animación para la carga. Recomiendo generar una que se ajuste a nuestro estilo mediante: Ajaxload
2. Crearemos una nueva clase de estilo en nuestra hoja de estilos, en mi caso la llamare loadimg, y agregamos un código similar a este:

      1:  .loadimg {

      2:      background-image: url(imagenanimadadefondo.gif);

      3:      background-repeat: no-repeat;

      4:      background-position: center center;

      5:  }

3. Simple, cierto? Ahora para implementar este estilo en nuestras imágenes simplemente hacemos esto dentro de nuestro código html:

      1:  <img src="tuimagen.jpg" border="0" class="loadimg" />