✔ rotierender Kreis als Fortschrittsanzeige

Status
Nicht offen für weitere Antworten.
Headymaster

Headymaster

Erfahrenes Mitglied
Hallo,

Also jeder kennt ja bestimmt diese Kreise, die angezeigt werden wenn ein Ajax-Request noch im Gange ist, sprioch readyState noch nicht = 4 ist.
So diesen rotierenden Kreis möchte ich gerne auch in meine Ajax-Engine einbauen, um dem User zu zeigen, dass etwas geladen wird.
Woher bekomme ich diesen Kreis und wie binde ich ihn am besten ein.

Ich finde wirklich nix...habe mich bei google und hier in der Forensuche umgeguckt aber nix :(

Würd mich sehr über Hilfe freuen. :)

MFG Nilson
 
Danke dir, das hat mir geholfen.

Jez brauch ich ja denke ich mal nur noch ne Funktion bauen, die mir das Bild dort anzeigt wo was geladen wird, solange es geladen wir :)

MFG NIlson
 
Hi,

am besten erstellst du ein absolute positioniertes Bild, das zu Beginn ausgeblendet wird. In der Request-Routine blendest du die Grafik vor dem Absetzen des Anfrage ein, in der Callback-Funktion wird sie wieder ausgeblendet.

Schematisches Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-15">

<style type="text/css">
  <!--
#loaderImg{ position: absolute;
            top: 50%;
            left: 50%;
            z-index: 999;
            display: none;}
 //-->
</style>

<script type="text/javascript">
<!--
var xmlHttp = false;

function theRequest() {
  // Request-Objekt erstellen (xmlHttp)
  // Wird hier nicht gezeigt

  // Ladegrafik einblenden
  document.getElementById("loaderImg").style.display = "block";

  // Request
  xmlHttp.open('GET', 'xmlhttp_request_dummy.php?id=1', true); 

  // Callback-Funktion
  xmlHttp.onreadystatechange = function () {
    if(xmlHttp.readyState == 4){
      if(xmlHttp.status == 200){
        // Gewünschte Anweisungen

        // Grafik wieder ausblenden
        document.getElementById("loaderImg").style.display = "none";
      }else{
        alert("Anfrage nicht erfolgreich!");
        // Grafik wieder ausblenden
        document.getElementById("loaderImg").style.display = "none";
      }
    }
  };

  // Request absetzen
  xmlHttp.send(null);
}
//-->
</script>

</head>
<body>
<img id="loaderImg" src="loader_img.gif">
</body>
</html>
Es handelt sich nicht um ein funktionsfähiges Beispiel, da das Erstellen des Request-Objekts wegen der Übersichtlichkeit nicht eingebunden wurde.

Vielleicht kannst du etwas damit anfangen.

Ciao
Quaese
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück