Das hier ist zwar eher im Bereich "Spielerei" anzusiedeln, aber dennoch recht nützlich. Schließlich sieht es einfach eleganter aus, wenn die Bilder eingeblendet werden, wenn sie fertig geladen sind. Außerdem sehen die Besucher nicht den alternativen Text des Bildes, sondern das kleine, sich drehende Rädchen, bei dem heutzutage (fast) jeder weiß, dass gerade etwas in Arbeit ist.

Los geht es mit dem HTML-Teil:

HTML
<div class="wrap">
   <h1>Bilder einblenden mit jQuery</h1>
   <div class="image_frame">
      <a href="http://www.flickr.com/photos/herschel_r/3226358452/">
         <img src="http://farm4.static.flickr.com/3474/3226358452_14572d5570.jpg" width="240" height="160" class="image" alt="" />
      </a>
   </div>
</div>

Der Übersichtlichkeit halber habe ich hier nur ein Bild eingebunden, und nicht sechs, wie in der Demo. Man kann allerdings so viele Bilder einbinden, wie man möchte. Der Aufbau ist ziemlich simpel: Ein <div>-Tag zum Aufspannen des Inhaltsbereiches und jeweils eins pro Bild.

Kommen wir nun zum jQuery-Teil:

Javascript
var loader = "<img src=\"load.gif\" class=\"load\" alt=\"Lädt…\" />";
$(document).ready(function() {
   $('.image').hide();
   $('.image_frame').append(loader);
   $(window).load( function() {
      $('.load').hide();
      $('.image').fadeIn('slow');
   });			
});

Als erstes speichern wir das Ladebildchen in der Variable loader. Man könnte das auch direkt in den HTML-Teil setzen, aber da gehört es meiner Meinung nach nicht hin. Danach verstecken wir das eigentliche Bild mit dem Befehl $('.image').hide(); und binden das Ladebildchen mit dem Befehl $('.image_frame').append(loader); ein. Nun kommt die Funktion, die das Ladebildchen verschwinden lässt, sobald das eigentliche Bild fertig geladen ist und dieses behutsam einblendet. Das wars auch schon.

Zum Schluss brauchen wir noch eine Portion CSS, damit das ganze auch so aussieht wie in der Demo:

CSS
.wrap {
	width: 556px;
	padding: 30px 0 0 30px;
	margin: 0 auto;
	clear: left;
}

h1 {
	margin-bottom: 30px;
}

.image_frame {
	position: relative;
	width: 246px;
	height: 166px;
	margin: 0 30px 30px 0;
	float: left;
	display: inline;
	border: 1px solid #EEE;
}

.image_frame img {
	padding: 1px;
	border: 2px solid #EEE;
}

.image_frame a:hover img {
	padding: 1px;
	border: 2px solid #CCC;
}

img.load {
	position: absolute;
	width: 32px;
	height: 32px;
	top: 67px;
	left: 107px;
	border: 0;
}

Das ganze kann man ganz nach seinen Bedürfnissen anpassen. Wichtig ist nur, dass die Angabe position: relative bei der Klasse .image_frame stehen bleibt, damit sich das Ladebildchen innerhalb des dazu gehörenden <div>-Tags absolut positionieren lässt. Und falls euch das Ladebildchen nicht so zusagt, findet ihr auf Ajaxload.info Alternativen.

Ansonsten bitte ich wie immer, bei Fragen oder Anregungen die Kommentarfunktion zu nutzen.