Vor allem langsame Internetverbindungen können diese unschönen Effekte sichtbar machen: Websites bauen sich Element für Element auf. Große Bilder werden nur teils oder verspätet angezeigt. Das Layout verschiebt sich so lange, bis alle Inhalte fertig geladen wurden.
Abhilfe schafft hierbei ein sogenannter „Preloader“ – oft auch nur „Loader“ oder „Loader Screen“ bzw. „Loader Icon“ genannt.

Web-Techniken

Was ist und bewirkt ein Preloader?

Ein Preloader ist eine vollflächige Animation. Sie wird so lange angezeigt, bis die Website im Hintergrund vollständig geladen ist. Sobald alle Elemente an ihrem richtigen Platz sind, wird der Preloader ausgeblendet und der Besucher kann die Website bedienen. Oft sind es nur Bruchteile einer Sekunde, bis er den Blick auf die Inhalte frei gibt. Aber auch wenn unschöne Effekte entfallen: die Animation kann nicht bewirken, dass eine Website schneller lädt.

Einfache Preloader sind drehende Icons oder Ladebalken, die dem Besucher anzeigen, dass die Seite noch aufgebaut wird. Hierzu muss kein extra Bild oder Video mit einer speziellen Software erstellt werden. Solche Animationen lassen sich einfach und schnell über HTML und CSS realisieren.

Schöner und eleganter sind jedoch im individuellen Design gestaltete Preloader. Hierzu wird die Animation als GIF oder Video über professionelle Grafik- und Videoprogramme erstellt. Dass man hierbei auch kreativ werden und Besuchern die Wartezeit versüßen kann, zeigen wir auf unserer Website mit dem Purzelbaum schlagenden Affen.

Verschiedene Beispiele zu Preloadern

Für viele unserer Kunden haben wir bereits Preloader gestaltet und eingesetzt. Diese reichen von einfachen drehenden Icons bis hin zu individuell aufbauenden Logo-Elementen.

Hausmann & Sandreuther
Hausmann & Sandreuther: www.hausmann-sandreuther.de
e-mops
e-mops: www.e-mops.de
Interplan
Interplan: www.interplan.de
Munich Consulting Group
Munich Consulting Group: www.mcg-gmbh.de
GESTA Automation
GESTA Automation: www.gestambh.de
Wildner+Designer
Wildner+Designer: www.werbeagentur-wildner-designer.de

Braucht meine Website einen Preloader?

Eine Lade-Animation kann jede Website besitzen – muss aber nicht. Bei sehr schlanken Seiten mit wenigen oder sehr kleinen Bildern ist ein Preloader nicht notwendig.
Sobald Sie aber feststellen, dass das Laden Ihrer Website mehr als eine Sekunde dauern kann oder sich das Layout während des Ladevorgangs verändert, ist ein Preloader eine sinnvolle Ergänzung.
Klicken Sie die einzelnen Seiten Ihres Internetauftritts durch und sehen Sie, ob etwas „komisch“ wirkt. Über die Tastenkombination Strg+F5 können Sie die durch den Browser zwischengespeicherten Bilder, Schriften, Stylesheets usw. löschen. Alle Inhalte der Seite werden anschließend frisch geladen. Dies simuliert einen neuen Website-Besucher.

Langsamere Internet-Geschwindigkeiten wie der Mobilfunkstandard 3G lassen sich auch über den Browser testen. Dazu in Chrome oder Firefox F12 drücken, um die Entwicklertools aufzurufen. Auf den Reiter „Netzwerk“ wechseln und im Menü die Drosselung einstellen. Wenn die Website bei guter 3G-Verbindung während des Ladevorgangs nicht ansprechend wirkt, sollte ein Preloader integriert werden.

Idee, Design, Animation und Einbindung

Egal ob einfacher Ladekreis oder individuelles Design: Preloader sind eine einfach umzusetzende, optische ansprechende Ergänzung Ihrer Website. Für die Umsetzung einer sympathischen Idee sowie die technische Integration sind wir gerne da!