Sie möchten mit einem Fortschrittsbalken signalisieren, dass Inhalte nachgeladen werden? So geht es:
<html>
<head>
<title>Fortschrittsbalken</title>
<style type="text/css">
#antwort
{
background: blue;
color: white;
border: solid 1px;
}
#P1
{
background: blue;
width: 0px;
height: 10px;
position: absolute;
top: 100px;
left: 100px;
}
</style>
<script type="text/javascript">
//Erzeuge das XMLHttpRequestObject
function erzXMLHttpRequestObject()
{
var resObjekt = null;
try
{
resObjekt = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(Error)
{
try
{
resObjekt = new ActiveXObject("MSXML2.XMLHTTP");
}
catch(Error)
{
try
{
resObjekt = new XMLHttpRequest();
}
catch(Error)
{
alert("Erzeugung des XMLHttpRequest-Objekts fehlgeschlagen!");
}
}
}
return resObjekt;
}
function sndReq()
{
resObjekt.open('get', 'fortschritt.php?z=' + Math.random(), true);
resObjekt.onreadystatechange = handleResponse;
resObjekt.send(null);
fortschritt();
}
function handleResponse()
{
if(resObjekt.readyState == 4)
{
document.getElementById("antwort").innerHTML = resObjekt.responseText;
}
}
i = 0;
function fortschritt()
{
document.getElementById("P1").style.width = i++;
if(resObjekt.readyState != 4)
{
setTimeout("fortschritt()", 5);
}
else
{
i = 0;
document.getElementById("P1").style.width = i;
}
}
resObjekt = erzXMLHttpRequestObject();
</script>
</head>
<body>
<form>
<input type="button" value="Zeige Ladebalken" onClick="sndReq()" />
</form>
<div id="antwort"></div>
<div id="P1"></div>
</body>
</html>
