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.

Kommentarfunktion für diesen Artikel geschlossen.