Kürzlich habe ich eine Website erstellt, welche nur aus einer einzigen HTML-Datei besteht. Die Seite umfasst zwar verschiedene Unterseiten und verfügt über eine Navigation, aber die einzelnen Bereiche werden mit einem Slide-Effekt per jQuery ein- und ausgeblendet.

Diese Variante kann für kleinere Seiten problemlos benutzt werden und bietet den Vorteil, dass die Seite – wenn sie einmal geladen ist – die einzelnen Inhalte sofort und ohne die Seite neu laden zu müssen anzeigen kann. Ein kritischer Punkt dieser Methode liegt am eben genannten Einschub „wenn sie einmal geladen ist“. Auch wenn die Seiteninhalte überschaubar sind, so sind sie in der Summe doch meist umfangreicher, als wenn diese bei einer herkömmlichen Website auf verschiedene Dateien verteilt werden können. Das erstmalige Laden der Website kann also ein paar Sekunden dauern, und je nachdem in welcher Reihenfolge sich die Seite aufbaut, kann dies zu kurzzeitig unschönen Darstellungen führen.

Die Lösung – ein Preloader

Eine Möglichkeit, dieses Problem zu lösen, liegt in der Verwendung eines Preloaders, welcher alle Inhalte der Website zuerst vorauslädt, und diese erst anzeigt, wenn alle Inhalte im Speicher verfügbar sind. Diese Art des Vorausladens kennt man vor allem aus umfangreichen und aufwändig gestalteten Flash-Seiten. Es ist aber auch möglich, einen solchen Preloader mit jQuery zu realisieren. Im Netz findet man dazu zahlreiche Möglichkeiten und Plugins.

QueryLoader

Ein einfach zu implementierendes und schnörkelloses Plugin namens „QueryLoader“ hat Gaya Kessler (www.gayadesign.com) entwickelt. Der Preloader ist in schlichtem Schwarz gehalten, und fügt der Seite einen Ladebalken hinzu, welcher sich von Links nach Rechts über den Bildschirm ausbreitet. Ist die Seite geladen, wird die Seite mit einer Animation geöffnet und angezeigt.

Implementation des Preloaders

Die Implementation des Preloaders ist dabei denkbar einfach. Zuerst wird die ZIP-Datei heruntergeladen (zu finden auf http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/). Neben dem jQuery-Code (wenn dieser nicht schon bereits vorhanden ist) wird im Header der Webseite das Plugin sowie die zugehörige CSS-Datei verlinkt (natürlich mit den entsprechend korrekt angepassten Pfaden).

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>
<link rel="stylesheet" href="css/queryLoader.css" type="text/css" />
<script type='text/javascript' src='js/queryLoader.js'></script>

Am Ende der Webseite (vor dem schliessenden body-Tag) wird dann noch folgender Code eingefügt:

<script type='text/javascript'>
QueryLoader.init();
</script>

Damit ist der Preloader auch schon in die Seite eingebunden. In dieser Grundkonfiguration wird der gesamte Inhalt der Webseite vorausgeladen. Es ist aber auch möglich, nur bestimmte Elemente einer Webseite vorauszuladen. Dies kann mit Hilfe eines Selektors definiert werden. Soll also zum Beispiel ein div-Container mit der id „bilder“ vorausgeladen werden, so wird anstelle des obigen Codes eine leicht abgewandelte Version verwendet:

<script type='text/javascript'>
QueryLoader.selectorPreload = "#bilder";
QueryLoader.init();
</script>

Auf der Webseite von Gayadesign gibt es zudem eine Version, bei welcher der Preload-Balken noch durch die Angabe von Prozentzahlen erweitert wurde.