Problem: Es soll ein Wartescreen solange angezeigt werden, bis die Website im Hintergrund komplett geladen ist. Um dieses Ziel zu erreichen wird hier ein kleines minimal Beispiel gezeigt.
1.) Anlegen eines DIV-Elementes auf der *.html Seite die geladen werden soll:
Am besten direct unter dem Header Tag oder an den Anfang der Datei.
<div class="se-pre-con"></div>
Und die folgenden JS-Bibliotheken einbinden:
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
<script src="http://cdn.jsdelivr.net/webjars/jquery/3.1.1/jquery.min.js"</script>
Nun wird in der CSS-Datei folgende Einträge erstellt, um die kompletee Seite zu überdecken:
.no-js #loader { display: none; } .js #loader { display: block; position: absolute; left: 100px; top: 0; } .se-pre-con { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url(../img/loading.gif) center no-repeat #fff; }
Als letztes wird in einer JS Datei/Oder direct im HTML Code noch die Ausblendfunktion sobald alles fertig ist geschrieben. Dieser JS Anwesiungen muss also als letztes ausgeführt werden.
$(window).load(function() { // Animate loader off screen $(".se-pre-con").fadeOut("slow");; });
Und das war es auch schon. Die entsprechenden Pfad angaben müssen selbstverständlich angpasst werden.