Ladezeiten überbrücken mit Preloading Animationen

Jeder kennt das Gefühl, wenn eine Website Subjektiv zu lange lädt. Wenn Bilder erst nachträglich erscheinen, Schriften sich noch einmal verändern oder gar das Layout umspringt, sobald weitere Teile nachgeladen werden. Je nach Website kann das mehr oder weniger nerven, selbst wenn die tatsächliche Ladezeit dann eigentlich doch nicht länger als ein paar Sekunden dauert. Insgesamt wirkt eine schnell ladende Website, bei der von Anfang an alles stimmt, einfach professioneller. Und je weniger gut das funktioniert, desto schlechter fällt auch der Gesamteindruck einer Website aus. Im schlimmsten Fall könnte sich das negativ auf das Geschäft auswirken, wenn User abspringen weil ihnen die Site nicht gefällt.

Um dieses Problem zu umgehen, gibt es einen einfachen aber oft wirkungsvollen Trick: den Preload Screen.

Animationen verkürzen subjektiv die Wartezeit

Tatsächlich löst ein Preload Screen natürlich nicht das eigentliche Problem, er versteckt nur die unfertige Site, bis sie wirklich fertig geladen hat. Dadurch wirkt die Site „aufgeräumter“ und die Ladezeit kann Subjektiv kürzer erscheinen. Wer möchte nicht lieber von einer schönen Animation unterhalten werden, anstatt zuzusehen wie sich Elemente einer Website langsam aufbauen? Zudem können diese Animationen auch wirklich schön anzusehen sein. Mittels CSS Keyframes sind der Kreativität praktisch keine Grenzen mehr gesetzt. Im Netz finden sich unzählige Beispiele für mögliche Ladeanimationen.

Wie funktioniert der Preload Screen?

Das Funktionsprinzip ist sehr einfach. Am Anfang des <body> wird ein Element eingehängt, welches den gesamten Bildschirm überdeckt. Hier kann nun die Animation angezeigt werden. Mittels JavaScript wird diesem Element eine CSS-Klasse hinzugefügt, sobald die Page komplett geladen ist:

<script>
 function load() {
 var wrapper = document.getElementById("preload-wrapper");
 wrapper.className += "loaded";
 }
 window.onload = load;
</script>

Im CSS kann das Element über diesen Selektor dann versteckt werden:

#preload-wrapper.loaded {visibility: hidden;}

Auf dieser Beispiel-Page können Sie sehen, wie das Ergebnis dann aussehen kann. Dieses Video ist ein gutes Tutorial für das Erstellen eines Preload Screens. Und auf dieser Site gibt es eine Unmenge an Animationen, die Sie als Vorlage für Ihren eigenen Preload Screen nutzen können.

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.