Ladeanimation mit jQuery

Lädt man größere Mengen an Daten, dann kann es vorkommen, dass der Anwender nicht weiß, ob eine Website bereits vollständig geladen ist, oder das Laden aufgrund eines Fehlers fehlgeschlagen ist und kein Inhalt angezeigt wird. Hier helfen Ladeanimationen. Sie geben dem Besucher eine Rückmeldung, was derzeit auf der Website passiert.

Eine Ladegrafik kann ganz einfach über http://ajaxload.info erstellt werden.

Schritt 1 – CSS

Damit die Ladeanimation nicht ständig angezeigt wird, setzten wir die Modal-Layer via CSS auf „none“.

CSS   
[crayon-5beb168c76ea0115713001/]
Schritt 2 – jQuery
jQuery   
[crayon-5beb168c76eb5888992483/]

Das war es eigentlich schon. Beim Laden wird das Modal eingeblendet und sobald die Seite geladen ist, wieder ausgeblendet. Währenddessen fügen wir via jQuery die „loading“ Klasse hinzu und entfernen sie wieder sobald die Seite vollständig geladen ist.

Add Comment