Tutorials Infos - Anleitungen - Hilfe - Dreamcodes
 

Fortschrittsbalken

Sie möchten mit einem Fortschrittsbalken signalisieren, dass Inhalte nachgeladen werden? So geht es:
Script:

<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>

 
ID: 1518
eingestellt am: 28.12.2007
Autor: Na
Status zum lesen: Gast
gelesen: 10346
Webseite: www.dreamcodes.com
[Drucken]