Programming

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.