nlz-it.net: Random IT stuff

Welcome to nlz-it.net
just a random IT blog.

GIB MIR DEIN GELD

If you like, support me ;-)

Wem die Seite gefällt,
kurz auf die Werbung klicken.
(AddBlocker Deaktivieren natürlich)

 

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.

Zum Seitenanfang
JSN Boot template designed by JoomlaShine.com
Wir benutzen Cookies

Wir nutzen Cookies auf unserer Website. Einige von ihnen sind essenziell für den Betrieb der Seite, während andere uns helfen, diese Website und die Nutzererfahrung zu verbessern (Tracking Cookies). Sie können selbst entscheiden, ob Sie die Cookies zulassen möchten. Bitte beachten Sie, dass bei einer Ablehnung womöglich nicht mehr alle Funktionalitäten der Seite zur Verfügung stehen.