Was ist eine gute Technik, um ein „loading ...“ Bildes für die Anzeige?

Question

Ich arbeite mit einem div, die eine beliebige Anzahl von img Elemente im Inneren hat. Gerade jetzt, jeder img hat folgende CSS:

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

Und die Bilder können mit einer Funktion, die zeigt und versteckt sie wiederum radelte Durch werden. Während jedes Bild Laden ist jedoch, würde Ich mag ein „loading ...“ angezeigt Bild. Ich möchte JavaScript / jQuery verwenden, um die Quelle jedes unvollständigen Bild für die Swap „loading ...“ image , während es immer noch zu Last zulässt . Was ist ein schlanker und mittlerer Weg, um dies?

zu tun

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

verrückt Beispiel

Answer 2

Es gibt ein imagesLoaded Plugin, das hier gefunden werden kann: http://gist.github.com/268257

Zeigen Sie einfach das Laden Bild, binden an das imagesLoaded Ereignis und wenn es ausgelöst wird, verstecken das Laden Bild.

UPDATE:

Eigentlich hat jQuery in Methoden gebaut Laden erkennen jetzt: http: //api.jquery. com / load-Ereignis /