Bilder mit jQuery einblenden, wenn sie fertig geladen sind

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.

Bilder mit jQuery einblenden, wenn sie fertig geladen sind

Demo | Download

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.

  • Twitter
  • Facebook
  • del.icio.us
  • MisterWong.DE
  • Yigg
  • MySpace
  • StumbleUpon
  • Webnews.de
  • LinkArena
  • Technorati
  • Digg

Geschrieben am 24. Juni 2009 • Abgelegt unter HTML/CSS, JavaScript, Tutorial, jQuery • Rivva

22 Kommentare zu "Bilder mit jQuery einblenden, wenn sie fertig geladen sind"

  1. Carsten

    – 10.7.2009

    Super praktische Sache, gerade wenn man mit Bildern von fremden Servern arbeitet.

    Allerdings habe ich festgestellt das wenn man den bösen Vor- oder Zurückbutton des Browser benutzt, die Bilder nicht mehr geladen werden.

  2. Emanuel

    – 10.7.2009

    vielen dank für deinen hinweis, das hatte ich nicht beachtet.

    die lösung ist ganz einfach: man hängt die load()-funktion nicht an den status der bilder, sondern an den des gesamten fensters.

    $(window).load( function() { ...

    so funktionierts.

  3. jqueryfan

    – 28.8.2009

    Erstmal: Super Job! Genau das, was ich gesucht habe. Ein Problem hab ich damit aber: Sowohl lokal als auch remote sehe ich zwar die Animation, aber wenn die vorbei ist, sind die Bildboxen leer (weiß). Wo liegt hier der Fehler? Ich habe nix an den Download-Dateien verändert....

  4. Emanuel

    – 28.8.2009

    @jqueryfan: danke für den hinweis. ich hatte den code nicht vollständig geändert. in der vorvorletzten zeile muss es

    $('.image').fadeIn('slow');

    anstatt

    $(this).fadeIn('slow');

    heißen. dann funktionierts. das musst du bei dir nur im javascript-teil ändern, und schon läuft es, wie es soll.

  5. jqueryfan

    – 28.8.2009

    Super, funktioniert! Danke!

  6. ben

    – 26.2.2010

    hi emanuel,

    danke für dieses kleine gimmick. ich habe mal eine frage. ich habe das auf nem wordpress cms eingesetzt.funktioniert auch bis auf eine kleinigkeit super. bei mir wird allerdings der loader nicht angezeigt. wenn du mir einen tip geben kannst würd ich dir den quellcode mal geben. danke schonmal

    grüße ben

  7. Emanuel

    – 26.2.2010

    hi ben,

    ich vermute mal, dass du den pfad einfach falsch gesetzt hast. von daher könnte ich dir aus der ferne wenig helfen, auch wenn ich den code habe.

    guck einfach noch mal genau, wo das lade-bild dir liegt und gib den entsprechenden pfad im javascript-teil ein.

  8. ben

    – 26.2.2010

    ja das hab ich mir auch gedacht. wahrscheinlich hab ich zu wenig plan was die syntax angeht :(

    Original:
    var loader = "";

    Mein Pfad:
    var loader = "";

    da bin ich mir nicht sicher ob man die slashes wie gewöhnlich setzen muss....

  9. ben

    – 26.2.2010

    oh...ok so wirds nix.... :(

    also prinzipiell setz ich einfach nen normalen slash zwischen die verzeichnisse, wie wenn ich ein bild refrenziere???
    oder muss ich was bei der syntax beachten?

  10. Emanuel

    – 26.2.2010

    genau, es ist ja einfach auch nur ein bild.

    bindest du den code denn direkt im kopf der seite ein, oder hast du ihn in eine javascript-datei ausgelagert?

  11. ben

    – 26.2.2010

    hab ich im header....das wordpress cms läuft allerdings momentan lokal. man muss da immer absolute pfade angeben. keine ahnung warum. jedenfalls hab ichs noch nicht zum laufen gebracht...

    ich muss allerdings dazu sagen dass ich uas deinem css nur die klasse für das bild im loader übernommen habe. den rest brauche ich nicht. aber imho dürftes daran nicht liegen.

  12. Emanuel

    – 26.2.2010

    daran könnte es liegen. das lade-bild ist absolut positioniert. wenn das umgebende div (in diesem falle div.image_frame) nicht die css-eigenschaft "position: relative" bekommt, wird die positionierung am body-tag ausgerichtet und das ladebild erscheint ganz woanders.

    ansonsten einfach mal den pfad kopieren, in die adresszeile des browsers eingeben und gucken, ob es angezeigt wird oder ob eine 404-fehler-seite erscheint.

  13. ben

    – 26.2.2010

    also das ladebildchen funktioniert schon...allerdings wenn es am body tag ausgerichtet würde dann müsste es ja auch links oben in der ecke zu sehen sein laut der angaben im css. das tut es leider nicht. ich vermute irgendwie das hängt mit der lokalen installation von WP zusammen und den pfadangaben. ist mir echt ein rätsel

  14. ben

    – 26.2.2010

    achja...ich habe auch keinen direkt umgebenden div container, nur die pilder in den posts, die wiederum in einen post div eingebunden sind. den habe ich dann halt in dem javascript untergebracht.

  15. ben

    – 26.2.2010

    soooo :) jetzt bekomm ich das ladebild angezeigt, aber es verschwindet nicht wenn das image geladen ist..ich bekomm bald ne meise....

  16. Emanuel

    – 26.2.2010

    hat das lade-bild auch die richtige klasse. der jquery-code lässt ja alle elemente mit der klasse load - in diesem falle das/die lade-bildchen - verschwinden, wenn die bilder fertig geladen sind. hat das lade-bildchen nicht die klasse load, dann verschwindet es auch nicht.

  17. jan

    – 27.2.2010

    Hi Emanuel,

    vielen Dank für dein tutorial - funktioniert alles besten :)
    eine frage hätte ich...ist es möglich die Bilder der Reihe nach zu laden und einzufügen? Momentan sind ja alle ausgeblendet bis das letzte geladen ist
    Grüße, jan

  18. Emanuel

    – 28.2.2010

    hallo jan,

    prinzipiell ist das sicherlich möglich. ich hatte die funktion auch erst an den ladestatus der bilder geknüpft, doch es hat sich herausgestellt, dass diese, wenn man im browser einmal zur vorherigen seite und wieder zurück geht, nicht mehr angezeigt werden.

    wenn man diese problem in den griff bekäme, könnte man anstatt:

    $(window).load( function() { …

    folgende funktion scheiben:

    $('.image_frame img').each( function() {
    $(this).load( function() { …

    theoretisch jedenfalls. ich habe das nicht ausprobiert. du kannst es mal versuchen und auch gucken, wie das in verbindung mit den vor- und zurück-tasten des browsers funktioniert.

    das ist alles, was mir dazu einfällt.

  19. jan

    – 2.3.2010

    hi Emanuel,

    danke
    ...falls ich eine Lösung find meld ich mich

    Gruß, j

  20. ben

    – 3.3.2010

    hi emanuel

    also ich bin grad nichtdazu gekommen am alten problem weiterzuarbeiten...ich sehe du hast die comments wieder gelöscht...ist aber auch nciht schlimm...ich hatte blos wenig zeit was zu machen. allerdings habe ich noch ne andere frage. da du ja gan nette dinge mit jquery und wordpress anstellst (dein referenzen im portfolio...) dachte ich ir du weist evtl, ob es eine option gibt mit dem nextpage tag in beiträgen die nachfolgenden infos per jquery zu laden, ohne einen seiten refresh zu verurscahen...

  21. ben

    – 3.3.2010

    achnee ich habs blos überlesen...ist ja gar icht gelöscht...sorry ;)

  22. Emanuel

    – 4.3.2010

    hi ben,

    die artikel per ajax nachzuladen ist etwas aufwändiger. wenn ich das richtig einschätze, musst du als erstes eine php-funktion schreiben, die die benachbarten artikel identifiziert und die jeweiligen inhalte aus der datenbank lädt.

    mit den ajax-funktionen von jquery kannst du diese php-funktion dann aufrufen. insgesamt dürfte das meine fähigkeiten übersteigen.

    auch ist das nur spekulation meinerseits. ich weiß nicht, wie die beste lösung aussieht und möglicherweise gibt es schon plugins, die das ermöglichen.