¿Qué es una buena técnica para la visualización de una imagen de “cargando ...”?

Question

Estoy trabajando con un div que tiene cualquier número de elementos img en su interior. En este momento, cada img tiene el siguiente CSS:

#content > img {
display: none;
position: absolute;
top: 0px;
left: 0px;
}

Y las imágenes pueden ser ciclados a través de una función que muestra y oculta por turno. Mientras que cada imagen es de carga, sin embargo, me gustaría mostrar un "cargando ..." imagen. Me gustaría utilizar JavaScript / jQuery para cambiar la fuente de cada imagen incompleta de la "cargando ..." imagen permitiendo al mismo tiempo a la carga . ¿Cuál es una manera clara y directa de hacer esto?

Answer 1

$(function(){
   $('<img>').attr('src','loading.gif'); // preload the "loading" image.

   $('#content > img').each(function(){
       var original = this.src;
       var $this = $(this);
       $this.attr('src','loading.gif'); // swap to loading image.
       $('<img>').attr('src',original)// pre-load original.
              .load(function(){
                 $this.attr('src',original); // swap it back when pre-load is done. 
              });
   })
});

ejemplo loco

Answer 2

Hay una imagesLoaded plugin que se puede encontrar aquí: http://gist.github.com/268257

Solo tiene que mostrar la imagen de carga, se unen al evento imagesLoaded y cuando es disparado, ocultar la imagen de carga.

ACTUALIZACIÓN:

En realidad, jQuery ha construido en los métodos de detección de carga ahora: http: //api.jquery. com / carga evento /