kostenloser Webspace werbefrei: lima-city

Während Laden eines Links mit Ajax Ladebalken anzeigen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   clubenergy

   clubenergy hat kostenlosen Webspace.

   0:31, 29.8.2008

   Hallo und zwar möchte ich wie im Titel beschrieben währendessen ein Hyperlink auf den ich auf meiner Seite geklickt hat eine Seite vollständig geladen hat einen Ajaxladenbalken im Vordergrund zeigen und den hintergrund solange transparent verdunkeln ?
   Hoffe es hat einer Ahnung bzw. eine Idee ;)
   
   vlg

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. m******s

   6:00, 29.8.2008

   Prinzipiell kannst du ein XMLHttpRequest-Objekt erstellen, damit ein Request durchführen und im onreadystatechange-callback auf den readyState 3 prüfen. Wenn der 3 ist, dann kannst du mit status (also z.B. http.status, wenn dein XHR-Objekt http heißt) den Status abfragen. Slso quasi document.getElementById('ajaxstatus').innerHTML = http.status;
   Dann solltest du per window.setTimeout die Callback-Funktion wieder aufrufen lassen, damit er das erneut anzeigt, also z.B (ohne Code fürs Request):
   
   

   function loadPage(http)
   {
       if(http.readyState == 3)
       {
           document.getElementById("ajaxstatus").innerHTML = http.status;
           window["_http"] = http;
           window.setTimeout("loadpage(_http)",500);
       }
       if(http.readyState == 4)
       {
           document.getElementsByTagName("body")[0].innerHTML = http.responeText;
       }
   }

   
   
   Anmerkungen:
   1. Der Code ist ungetestet, ich habe kA, was der am Ende ergibt. Wenn er funktioniert, wie er soll, dann:
   2. speichert er das XMLHttpRequest-Objekt in einer globalen Variable namens _http, musst also eventuell aufpassen mit deinen Variablennamen. Ein Workaround wäre es, ein globales Arras zu erzeugen, für alle gerade durchgeführten Requests, damit die sich nicht in die Quere kommen.
   3. fragt er alle 500 Millisekunden den Status ab und zeigt ihn an. Das Intervall lässt sich natürlich beliebig verändern.
   4. darf die Rükgabe des Requests nur der Inhalt des Bodytags sein. Du könntest es auch versuchen, statt "body" einmal "html" einzufügen, ich bin mir aber nicht sicher, ob das funkt. Wenn, müsstest du dann den Inhalt des HTML-Tags beim Request zurückgeben (logisch).
   
   Also, ich gehe davon aus, dass du gut genug coden kannst, um den Code so zu modifizieren, dass aus dem status-Wert die Breite eines Statusbalkens berechnet wird und dass die Seite während des Requests verdunkelt wird (dazu, falls du kP hast, wie du das machen solst, bietet sich ein Halbtransparentes div-Element mit z-index 1000 oder so an) und dass das alles allgemein ein wenig mehr auf diene Wünsche zugeschnitten wird.
   Wie gesagt, der Code ist ungetestet, ich weiss in letzter Konsequenz nicht einmal ob in der status-Eigenschaft echt der status drin steht, den du suchst, habs nur in einer Referenz gefunden und sah am ehesten so aus ;)
   
   [edit] Okay, offenbar ist die "status"-Eigenschaft nicht, was ich gedacht habe... vermute mal, die einzige Chance, die du hast, ist, das HTML-Dokument in viele einzelne Teile zu zerlegen und die jeweils einzeln zu laden... und den Ladebalken, wenn 3 von 10 Teilen z.B. geladen sind auf 30% seiner maximalen Breite zu setzen... vermutlich...
   
   Inhalt des 2. Posts
   Hoffentlich zählt das jetzt nicht als Doppelpost, aber ich hab da noch ne andere Idee (ebenfalls ungetestet, aber dieses mal wenigstens basierend auf den W3C-Spezifikationen).
   Offenbar kann man laut Spezifikation auch auf responseText auch zugreifen, wenn der Status erst auf LOADING steht. Also wäre das hier eventuell eine Möglichkeit:
   
   

   function loadPage(http)
   {
       if(http.readyState == 3)
       {
           var total = http.getResponseHeader("Content-Length");
           var current = http.responseText.length;
           var progress = Math.round(current / progress, 2);
           document.getElementById("ajaxstatus").innerHTML = (progress * 100) + "%";
           document.getElementById("progressbar").style.width = Math.round(200 * progress) + "px";
           window["_http"] = http;
           window.setTimeout("loadpage(_http)",500);
       }
       if(http.readyState == 4)
       {
           document.getElementsByTagName("body")[0].innerHTML = http.responeText;
       }
   }

   
   
   Was der Code machen sollte:
   - Im HTML-Element mit der ID "ajaxstatus" sollte der Fortschritt in % angezeigt werden.
   - Das HTML-Element mit der ID "progressbar" sollte alle 500 Millisekunden auf x% von 200 gesetzt werden.
   - Wenn alles fertig ist, wird im Body-Tag der empfangene Text angezeigt.
   
   
   Ich werte es als Doppelpost. Also... ;)
   
   
   Beitrag geändert: 30.8.2008 16:14:56 von moritzpeuser

4. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?