200913Okt

QueryLoader: Inhalte mit JavaScript vorausladen

Schöne Preloader mit dezenten "Loading"-Animationen blieben bisher der Flash-Technologie vorenthalten. Für die HTML-Welt gibt es zwar ein paar JavaScript-Lösungen, aber keine dürfte so elegant und veränderbar wie der QueryLoader von Gaya Kessler sein. Das auf jQuery basierende Script bietet verschiedene Möglichkeiten für das Vorausladen von Website-Inhalten. So lässt sich die komplette Seite oder auch nur bestimmte Elemente im Voraus laden. Das Skript erkennt <img>-Tags und Bilder in Stylesheets.

QueryLoader

Der eingestellte Ladebalken kann angepasst werden — im Beispiel kann man sich von der Standard-Animation überzeugen lassen.
Der QueryLoader ist einfach zu implementieren und benötigt neben der Einbettung der JavaScript-Bibliotheken lediglich eine Zeile Code:

  • QueryLoader.init();

Mit dieser Einstellung wird der komplette <body>-Teil vorausgeladen. Es können wiegesagt auch gezielt bestimmte Elemente mit dem 4,5 KB großen Skript geladen werden.
Wer das Gegenteil erreichen möchte, kann das Lazy Load-Plugin für jQuery nutzen: Mit diesem Skript werden Bildelemente einer Website erst geladen, wenn sie sich im sichtbaren Bereich des Browserfensters befinden. Hier gibt es deine Demo von Lazy Load in Aktion.