Каков хороший метод для отображения изображения "загрузка ..."?

Question

Я работаю с div, в котором есть любое количество img элементов. Прямо сейчас каждый img имеет следующий CSS:

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

И изображения можно циклически проходить с помощью функции, которая показывает и скрывает их по очереди. Однако, пока загружается каждое изображение, я бы хотел отобразить изображение «загрузка ...». Я хотел бы использовать JavaScript / jQuery для замены источника каждого неполного изображения на изображение «loading ...» , в то же время позволяя ему загрузить . Что такое скудный и подлый способ сделать это?

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. 
              });
   })
});

сумасшедший пример

Answer 2

Существует плагин для загрузки изображений, который можно найти здесь: http://gist.github.com/268257

Просто покажите изображение загрузки, привяжите к событию imagesLoaded и, когда оно сработает, скройте изображение загрузки.

UPDATE:

На самом деле, в jQuery встроены методы для определения загрузки: http://api.jquery.com/load-event/