AJAX Loader für einen kleinen Bereich

Ich nehme Bezug auf mein Tutorial zum AJAX Loader – Ladeanzeige mit JavaScript vor einiger Zeit. Viele Leser haben mich angeschrieben mit der Bitte, ein kleines Tutorial zu schreiben, wie mann einen AJAX Loader mit JavaScript für einen kleinen Bereich auf der Seite schreiben kann. Aufgrund dessen habe ich mich nochmal hingesetzt, und ein zweites Tutorial zum Thema AJAX Loader mit JavaScript gemacht.

Ziel dieses kleinen Tutorials ist folgendes: Wir binden ein AJAX Programm auf einem bestimmten Bereich einer Internetseite ein. Dieses AJAX Programm ruft eine loader-Funktion auf sobald sie gestartet wird. Ist die Funktion beendet wird eine unloader-Funktion aufgerufen.

[ad]

Vorgehensweise:

Der Loader nur für einen bestimmten Teil auf der Internetseite

Das Komplette AJAX Programm kommt in einen DIV der die Maskierung darstellt. Über den AJAX Programm-Bereich wird ein weiterer DIV Container mit einer Transparenz gelegt. In der Mitte wird eine GIF Grafik positioniert. Der DIV mit der Transparenz ist zuerst 0 Pixel breit und 0 Pixel hoch und nicht sichtbar. Die AJAX Loader Grafik ebenfalls. Wird nun ein AJAX Request gestartet, lesen wir die Größe des äußersten DIV aus, und schreiben diese Werte in den Transparenz-DIV. Ausserdem ermitteln wir die absolute Mitte für die GIF Grafik und positionieren diese.

Mein AJAX Programm soll auf meiner Seite in einen bestehenden DIV Container gesetzt werden. Innerhalb dieses Containers erstelle ich folgende Struktur:

[sourcecode language="html"]
<!-- Hier beginnt die Maskierung -->
<div id="loader-mask">

	<!-- Hier beginnt der Teiltransparente DIV -->
	<div id="loader" style="display:none"></div>
	<!-- Und ist dann auch schon wieder zu Ende -->

	<!-- Hier setzen wir die loader Grafik -->
	<img src="loader.gif" class="loadergif" id="loadergif" style="display:none;" width="32" height="32">
	<!-- Loader Grafik ende -->

	<!-- Eigentliches AJAX Programm beginnt hier -->
	<form name="form1" method="post" action="">
	Bitte gib die erste Zahl zur Berechnung ein:<br>
	<input name="zahl1" type="text" id="zahl1" size="8" value="32"><br><br>
	Bitte gib die zweite Zahl zur Berechnung ein:<br>
	<input name="zahl2" type="text" id="zahl2" size="8" value="16"><br><br>
	Was soll mit den Zahlen passieren?<br>
	<input type="radio" name="radio" id="addieren" value="addieren" checked>addieren<br>
	<input type="radio" name="radio" id="subtrahieren" value="subtrahieren">subtrahieren<br>
	<input type="radio" name="radio" id="multiplizieren" value="multiplizieren">multiplizieren<br>
	<input type="radio" name="radio" id="dividieren" value="dividieren">dividieren<br><br>
	Diese Berechnung jetzt
	<span onClick="rechnen()" style="cursor: pointer; font-weight:bold;">
		> durchführen <	</span><br><br>
	Ergebniss: <strong><span id="ergebniss">noch nichts berechnet</span></strong><br>
	</form>
	<!-- Und hier endet das AJAX Programm -->

</div>
<!-- Und hier endet der Maskierungs DIV -->
[/sourcecode]

Wichtig dabei ist, dass der DIV mit der ID “loader” einen display=”none” bekommt. Genauso muss auch die Grafik einen display=”none” bekommen.

Warum liegt denn die Grafik nicht IM loader-DIV? Ganz einfach: Der DIV hat per CSS eine Transparenz bekommen. Diese Transparenz würde auf das Bild vererbt werden. Deshalb legen wir das Bild außerhalb des Layers und positionieren es nachher per JavaScript.

Für den Loader benötigen wir folgende CSS Anweisungen:

[sourcecode language="css"]
#loader-mask {
	position:relative;
}
#loader {
	background-color:#FFFFFF;
	left:0;
  filter:Alpha(opacity=80); /* IE */
  -moz-opacity:0.8; /* Gecko-Browser */
  opacity:0.8; /* Opera 9+ */
  position: absolute;
	position:absolute;
	text-align:center;
	top:0;
}
.loadergif {
	position:absolute;

}
[/sourcecode]

Und hier nun doch die zwei JavaScript Funktionen loader und unloader:

[sourcecode language="javascript"]
function loader() {
	/* Breite und Höhe des Maskierungs-DIV's auslesen */
	var divH = document.getElementById('loader-mask').offsetHeight;
	var divW = document.getElementById('loader-mask').offsetWidth;

	/* Linke und obere Position des Loader GIF berechnen und setzen */
	var imgTop = (divH / 2) - (document.getElementById('loadergif').height / 2);
	var imgLeft = (divW / 2) - (document.getElementById('loadergif').width / 2);
	document.getElementById('loadergif').style.left = imgLeft;
	document.getElementById('loadergif').style.top = imgTop;

	/* dislay="hidden" vom Bild löschen */
	document.getElementById('loadergif').style.display = "";

	/* den transparenten DIV einblenden und höhe und breite setzen */
	document.getElementById('loader').style.width = divW + "px";
	document.getElementById('loader').style.height = divH + "px";
	document.getElementById('loader').style.display = "";
}

function unloader() {
	/* alles zurücksetzen und ausblenden */
	document.getElementById('loader').style.width = "0px";
	document.getElementById('loader').style.height = "0px";
	document.getElementById('loader').style.display = "none";
	document.getElementById('loadergif').style.display = "none";
}
[/sourcecode]

Und hier die Onlinedemo zu den Code Snippet: AJAX Loader Onlinedemo

Dieses Tutorial steht in Verbindung zu folgenden Anleitungen:

Ressourcen: