Anzeige
Tutorialbeschreibung

jQuery - Bilder vorladen

jQuery - Bilder vorladen

Wer Bildergalerien aufbaut, kennt das Problem: Bis die Bilder vollständig geladen werden, dauert es manchmal eine – wenn auch kleine – Weile. Und während dieser Wartezeit bekommen die Besucher dann lediglich die Alternativtexte der Bilder zu sehen. Elegant ist das freilich nicht. Dank der jQuery-Ereignisbehandlung und einer entsprechenden Ajax-Vorschaugrafik kann man die Ladezeit optisch ansprechender gestalten.


Wurde ein Bild noch nicht vollständig geladen, bekommen die Besucher – wenn sie denn überhaupt definiert wurden – Alternativtexte angezeigt. Diese werden bekanntermaßen mittels des alt-Attributs definiert.

<img src="bild1.jpg" width="333" height="250" class="image" alt="Ich bin ein Bild" />
Der Inhalt des alt-Attributs ist dann zu sehen, wenn das Bild nicht geladen werden kann. (In diesem Zusammenhang verweise ich gerne auf diesen Artikel hier: http://www.bjoernsworld.de/html/alt-text.html. Auf dieser Seite wird noch einmal ausführlich beschrieben, was es mit den beiden Attributen alt und title wirklich auf sich hat und warum der Internet Explorer bei der Interpretation des alt-Attributs irrt).

Bilder



 
Angezeigt wird dieser Alternativtext allerdings auch, wenn die Grafik noch nicht vollständig geladen wurde. Und genau das ist optisch alles andere als ansprechend. An diesem Punkt setzt dieses Tutorial an. Denn mittels jQuery und einer eigens generierten sogenannten Ajax-Grafik kann man dafür sorgen, dass die Bilder erst dann angezeigt werden, wenn sicher ist, dass sie vollständig geladen sind. Dadurch wird verhindert, dass Besucher während der Wartezeit die Alternativtexte sehen. Anstelle dieser Texte gibt es eine Ladegrafik zu sehen. Die könnte dann beispielsweise folgendermaßen aussehen:

Bilder



 
Solche Bilder kennen Sie von zahlreichen Webseiten. Und so etwas können Sie vergleichsweise einfach umsetzen. Dabei kommt das bereits vorgestellte ready-Event zum Einsatz. Bevor aber die Syntax im Detail vorgestellt wird, noch ein allgemeiner Hinweis in Sachen Ladegrafik. Diese können Sie sich natürlich selbst erstellen. Wer das nicht möchte, kann allerdings auch auf einen entsprechenden Online-Generator zurückgreifen. Einen solchen gibt es beispielsweise auf der Seite http://www.ajaxload.info/.

Bilder



 
Hier können Sie sich ganz einfach eine entsprechende Grafik generieren lassen. Dazu wählen Sie zunächst den Typ der Grafik. Was man dort letztendlich einstellt, ist sicherlich Geschmackssache. Definieren Sie zusätzlich die Hintergrund- und die Vordergrundfarbe. Außerdem kann man noch feststellen, ob die Grafik transparent sein soll. Mit Generate it! wird die Grafik erzeugt.

Bilder



Anschließend lässt sich die Grafik über die Schaltfläche Download it! herunterladen. Die Grafik liegt im Gif-Format vor. Damit sind die Vorarbeiten bereits abgeschlossen. Im folgenden Beispiel wird der Einfachheit halber übrigens davon ausgegangen, dass die Ladegrafik im gleichen Verzeichnis wie die HTML-Datei liegt. Ist das bei Ihnen nicht der Fall, müssen Sie den Pfad innerhalb der Variablendeklaration entsprechend anpassen.
Das Ergebnis der folgenden Schritte sieht im Endeffekt so aus.
[Beispiel anzeigen]


 
Zunächst der vollständige Skript-Bereich.
 <script type="text/javascript">
 /* <![CDATA[ */                                             
 $(document).ready(function() {
 var loader = "<img src="ajax-loader.gif" class="load" alt="L&auml;dt&hellip;" />";
 $('.image').hide();
 $('.image_frame').append(loader);
 $(window).load( function() {
 $('.load').hide();
 $('.image').fadeIn('slow');
 });                           
 });
 /* ]]> */
 </script>


Die Anweisung
 $(document).ready(function)
kennen Sie bereits. Dieser Aufruf sorgt dafür, dass überprüft wird, ob das HTML-Dokument vollständig geladen wurde. (Wo die Unterschiede dieser Variante im Vergleich zu herkömmlichen JavaScript liegen, wurde bereits in einem anderen Tutorial beschrieben).
Anschließend wird ein einfaches Ladebild in der Variable loader gespeichert. Dabei mag die Syntax zunächst gewöhnungsbedürftig aussehen:
 <img src="ajax-loader.gif" class="load" alt="L&auml;dt&hellip;" />";

Dabei handelt es sich jedoch um eine normale Grafikreferenz, bei der allerdings die Anführungszeichen speziell maskiert werden. Im Endeffekt bewirkt diese Syntax die folgende Definition:
 <img src="ajax-loader.gif" class="load" alt="Lädt…" />

Mittels
$('.image').hide(); 
versteckt man das Bild. Das eigentliche Bild wird anschließend mit  versteckt. Anschließend wird das Ladebild mittels
 $('.image_frame').append(loader); 
eingebunden. Das, was innerhalb von
 $(window).load( function()
steht, wird dann ausgeführt, wenn das Dokument inklusive aller Bestandteile vollständig geladen wurde. Und zu diesen Bestandteilen gehören dann auch die Bilder. Sobald das eigentliche Bild da ist, wird das Ladebild mittels
 $('.load').hide();
ausgeblendet und das richtige Bild angezeigt.

 
Das wird hier übrigens mittels eines kleinen Effekts optisch ansprechend gestaltet.
 $('.image').fadeIn('slow');

Die Wahl fiel dabei auf den fadeln-Effekt. Bei diesem Effekt wird die Grafik von transparent bis zur Vollanzeige aufgezogen. Als Geschwindigkeit wurde in diesem Fall slow, also langsam, gewählt. Mittels def und fast lässt sich der Effekt beschleunigen. Ebenso wäre aber auch eine Angabe in Millisekunden möglich. Das Gegenstück zu fadeIn ist übrigens fadeOut. Allerdings werden die damit versehenen Elemente ausgeblendet, was im vorliegenden Fall natürlich kontraproduktiv wäre.
Der eigentliche HTML-Bereich hält keine weiteren Überraschungen parat.
 <div class="image_frame">
 <a href="#">
 <img src="bild1.gif" width="240" height="160" class="image" alt="Bild 1" />
    </a>
 </div>
 <div class="image_frame">
 <a href="#">
 <img src="bild2.gif" width="240" height="160" class="image" alt="Bild 2" />
 </a>
 </div>

Jedes Bild wird dabei in einen eigenen div-Bereich gepackt. Wichtig ist lediglich, dass den div-Bereichen die richtige Klasse zugewiesen wird. Dabei muss es sich um den gleichen Klassennamen handelt, der auch bei
 $('.image_frame').append(loader);
angegeben wurde. Zudem ist darauf zu achten, dass im aktuellen Beispiel davon ausgegangen wird, dass sich die Grafiken im gleichen Verzeichnis wie die HTML-Datei befinden. Ist das nicht der Fall, müssen die Pfadangaben entsprechend angepasst werden.

Was jetzt noch fehlt, sind die eigentlichen CSS-Definitionen. Diese beschränken sich auf ein paar wenige Zeilen.
.wrap {
 width: 750px;
 margin: 0 auto;
 clear: left;
}
.image_frame {
 position: relative;
 float: left;
 display: inline;
 border: 1px solid #eee;
}
.image_frame img {
 padding: 1px;
 border: 2px solid #eee;
}
img.load {
 position: absolute;
 width: 48px;
 height: 48px;
 top: 100px;
 left: 100px;
 background-color: #eee;
 border: 0;
}
Besonderheiten gibt es hier nicht weiter zu beachten. Lediglich die Definition
 position: relative;

innerhalb der Klasse .image_frame ist wichtig. Denn durch die wird erreicht, dass das Ladebild innerhalb der eigentlichen Bilder-div-Bereiche absolut positioniert werden kann. Die übrigen Angaben sind Geschmackssache.


Fazit

Es ist also ganz einfach möglich, seine Bildergalerie mittels jQuery und einer Ajax-Ladegrafik aufzupeppen. Dafür sind lediglich ein paar Zeilen Code nötig. Sinnvoll ist das beschriebene Vorgehen vor allem bei solchen Galerien, in denen man die Bilder von externen Servern einliest. Ein typisches Beispiel dafür ist das Einbinden von Flickr-Bildern. Ebenso bietet sich das hier Beschriebene aber auch immer dann an, wenn die Bilder vergleichsweise ladeintensiv sind. Kurzum: Das Skript hilft dabei, die Pause, die bis zum vollständigen Laden eines Bildes vergeht, zu überbrücken, ohne dass die Benutzer die Alternativtexte präsentiert bekommen.

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von dopetob_
  • 17.08.2010 - 14:13

also ich finde dieses tut gut gelungen;)

Portrait von thoffmann
  • 24.07.2010 - 11:53

Interessant wäre eine Lösung, in der man mehrere Bilder hat, alle vorgeladen werden, aber nicht erst angezeigt werden wenn ALLE geladen sind, sondern wenn ein einzelnes Bild geladen ist, dass es dann direkt angezeigt wird, auch wenn andere noch laden.

habe ich schon die ganze zeit gegooglet aber da findet man nichts.

Portrait von quid_w
  • 16.06.2010 - 22:52

Gefällt mir sehr! =)

Portrait von Cyberboy2007
  • 13.02.2010 - 18:47

Ist es auch möglich, diesen Effekt auf ALLE Bilder anzuwenden, sprich, EIN Loader wird so lange angezeigt, bis ALLES Vorschaubiler geladen sind und nicht ein Loader für jedes Bild?!?!

THX

Portrait von Susan99
  • 18.12.2009 - 18:58

Sehr gut und verständlich beschrieben. Vielen Dank!

LG Susan

Portrait von websmurf
  • 18.12.2009 - 09:44

Für das Tutorial 5 Sterne - gut erklärt.

Ob ich den Einsatz der Preloader gut finde, weiss ich noch nicht so recht. Macht das die Seite wirklich hübscher?

Portrait von Rembremerding
  • 14.12.2009 - 07:22

Besten Dank für ein - wie immer von Daniel Koch - gut erklärtes und verständliches Tut.

Portrait von johanna52
  • 13.12.2009 - 17:13

wieder mal ein tolles tut

Portrait von leveler
  • 13.12.2009 - 16:56

prima, danke dafuer..werd ich gleich mal ausrpobieren...

Portrait von Sibulan1
  • 13.12.2009 - 10:22

Danke fuer das tut, toll erklaert

x
×
×