Eine Fortschrittsanzeige als Warteschleife mit JavaScript

Erfolgreich getestet mit Internet Explorer 5.5 und 6.0, Netscape Navigator 4.75, 6.1 - 6.22, 7.0 und 7.1, Mozilla 1.0, 1.21 und 1.4 sowie mit Opera 5.02, 5.11, 6.0, 6.01 und 7.01.

Diese Warteschleife ist aber noch ohne Ladefunktion.

Demo: Hier

Der JavaScript-Quellcode :

<script language="javascript">
  nn4=(document.layers)?1:0;
  nn6=(document.getElementById&&!document.all)?1:0;
  op5=(document.all&&!document.styleSheets)?1:0;
  ie5=(document.getElementById&&!nn6&&!op5)?1:0;

  if(ie5||nn6||nn4||op5) {
    document.write("
        <style type='text/css'>div {position:absolute;left:-500;top:-500}</style>");

    //Rahmen erzeugen
    if(ie5||nn6||op5) document.write("<div id='P0'>"+
        "<table width='300' height='30' cellpadding='0' cellspacing='0'"+
        "style='border-width:1;border-style:solid;border-color:red'><tr><td>"+
        "<p align='center'>Geich geht's weiter ...</p></td></tr></table></div>");
    else document.write("<div id='P0'>"+
        "<table width='300' height='30' cellpadding='0' cellspacing='0' border='1'"+
        "style='border-width:1;border-style:solid;border-color:red'><tr><td>"+
        "<p align='center'>Geich geht's weiter ...</p></td></tr></table></div>");

    //Fortschritts-Felder erzeugen (Leerzeichen wg. NN 4x nicht vergessen)
    t="<table width='30' height='30' bgcolor='red' border='0'"+
        "cellpadding='0' cellspacing='0'><tr><td>&nbsp;</td></tr></table>";
    for(i=1;i<11;i++) document.write("<div id='P"+i+"'>"+t+"</div>");
  }

  n=-1;

  //Fortschritt anzeigen. Wenn fertig, zurück zur Startseite.
  function progressBar() {
    n++;
    if(ie5) {
      if(n!=0)
        document.getElementById("P"+n).style.left=document.body.clientWidth/2-180+30*n;
      else document.getElementById("P0").style.left=document.body.clientWidth/2-150;
      document.getElementById("P"+n).style.top=document.body.clientHeight/2;
    }
    else if(nn6) {
      if(n!=0) document.getElementById("P"+n).style.left=window.innerWidth/2-180+30*n;
      else document.getElementById("P0").style.left=window.innerWidth/2-150;
      document.getElementById("P"+n).style.top=window.innerHeight/2;
    }
    else if(nn4) {
      if(n!=0) document.layers[n].left=window.innerWidth/2-180+30*n;
      else document.layers[n].left=window.innerWidth/2-150;
      document.layers[n].top=window.innerHeight/2;
    }
    else if(op5) {
      if(n!=0) {
        if (/Opera( |\/)7/i.exec(navigator.userAgent)) {
          document.getElementById("P"+n).style.left=window.innerWidth/2-183+30*n;
          document.getElementById("P"+n).style.top=window.innerHeight/2-8;
        }
        else {
          document.getElementById("P"+n).style.left=window.innerWidth/2-180+30*n;
          document.getElementById("P"+n).style.top=window.innerHeight/2-5;
        }
      }
      else {
        document.getElementById("P0").style.left=window.innerWidth/2-150-3;
        document.getElementById("P0").style.top=window.innerHeight/2-8;
      }
    }
    setTimeout("
      if(n<10) progressBar();else location.replace('Warteschleife.html')",1000);
  }
</script>

Und in den body-tag kommt onload="progressBar()".

Download Warteschleife.zip (ca. 1,5 kb)