Dieser Artikel zeigt eine Möglichkeit einen Ladebildschirm mit Hilfe von Dojo und CSS zu realisieren. Aufgabe des Ladebildschirms ist es den Benutzer darüber zu informieren, dass der Browser noch mit dem Verarbeiten der geladenen Seite beschäftigt ist. Um dies zu realisieren werden lediglich ein paar Dojo Funktionen, ein wenig CSS und eine animierte Grafik benöitgt.
Der unten stehende Quellcode stammt aus einer einfachen HTML Datei, welche für diesen Artikel als Beispiel dienen soll. Zeile acht und zehn binden die CSS Datei und das Dojo Framework ein. Über die CSS Definitionen wird das Aussehen und die Grafik des Ladebildschirms beschrieben. Dojo wird eingebunden um festzustellen, wann der Ladebildschirm gestartet/deaktiviert werden muss. In Zeile 12 bis 21 befindet sich die Dojo Javascript Funktion, die alles erst möglich macht. Sie befindet sich im Header der HTML Datei und überwacht das Parsen der Seite im Browser. Beim Parsen der Seite durch den Browser aktiviert das Script den Ladebildschirm und deaktiviert diese erst, wenn die Seite vollständig geparst wurde und dargestellt werden kann. Das deaktivieren der Animation wird über loader.style.display = “none”; erreicht. Damit werden die CSS Eigenschaften der Animation auf unsichtbar gesetzt, wodurch der Browser diese nicht mehr darstellt. Das ganze passiert in diesem Beispiel mit einer Verzögerung von 1000 Millisekunden und einem fade out Effekt.
Zeile 27 zeigt die HTML Tags, die mit Hilfe des CSS zu einer Ladeanimation werden. Wichtig ist, dass diese direkt nach dem Body Tag zum Einsatz kommen, damit sie als erstes vom Browser geparst werden.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Beispiel eines Ladebildschirms mit Dojo und CSS</title>
<link rel="stylesheet" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js" type="text/javascript"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.addOnLoad(function(){
dojo.parser.parse(document.body);
setTimeout(function(){
var loader = dojo.byId("loader");
dojo.fadeOut({ node: loader, duration: 1000, onEnd: function(){ loader.style.display = "none"; }}).play();
}, 1000);
});
</script>
</head>
<body>
<div id="loader"><div id="loaderInner"></div></div>
<div><p style="text-align:center;">Dieser Text wird erst angezeigt, wenn das Dokument komplett geladen wurde.</p></div>
</body>
</html>
Kommen wir nun zu den CSS Eigenschaften des Ladebildschirms. Sie sorgen dafür, dass dieser das ganze Browserfenster füllt und die benötigte Animation in Form eines Gifs eingebunden wird. Die erste CSS Definition bewirkt, dass der ganze Bildschirm mit einem grauen Farbton hinterlegt wird. Über z-index:999; wird der Ladebildschirm auf die oberste Ebene des HTML Dokumentes gelegt. Damit überdeckt er alle darunter liegenden Ebenen.
Die zweite CSS Definition positioniert das animierte Gif in der Mitte des Bildschirms. Schließlich wird noch der Pfad zum Gif angegeben. In diesem Beispiel handelt es sich um einen animierten Kreis der dem Benutzer den Eindruck vermittelt, dass der Browser noch mit dem Verarbeiten der Seite beschäftigt ist. Das benutzte Gif in diesem Beispiel kann natürlich durch jede beliebige andere Animation ersetzt werden. Es sollte jedoch darauf geachtet werden, dass die CSS Eigenschaften an die Größe des jeweiligen Bildes angepasst werden.
#loader {
padding:0;
margin:0;
position:absolute;
top:0; left:0;
width:100%; height:100%;
background:#efefef;
opacity: 0.98;
z-index:999;
vertical-align:middle;
}
#loaderInner {
position: absolute;
top: 50%;
left: 50%;
width: 32px;
height: 32px;
margin-top: -16px;
margin-left: -16px;
background-image: url("images/loading_animation.gif");
background-repeat: no-repeat;
}
Das in diesem Artikel beschriebene Beispiel kann hier betrachtet werden. Der beschriebene Ladebildschirm ist recht einfach gehalten und bietet noch viel Spielraum für Verbesserungen und kreative Designs.
