AndreM: document.write mit Ladebalken.

Hallo Leutz,

Ich verwende derzeit ein Script welches Suchergebnisse in einem neuen Fenster mittels der Function document.write ausgibt. Funktioniert auch alles gut.
Problem ist das es teilweise bis zu 15sec dauert bis das komplette eintragen in dem neuen Fenster abgeschlossen ist.
Ich würde nun gerne eine Art Ladebalken einfügen damit der Benutzer sieht das was passiert.
Der Fenster aufruf sieht wie folgt aus:

 stats='scrollbars=yes,toolbar=no,location=no,directories=no,status=no,menubar=no,titel=yes,resizable=yes'  
stats += 'scrollbars=on,resizable=yes'  
MsgBox = window.open ("","namewindow",stats)  
MsgBox.document.write ("<head><title>Fenstertitel</title><LINK href='Dokumente/Scripts/Style.css' type=text/css rel=stylesheet></head><style type='text/css'> A:hover {color:#ffffff; font-size:30; text-decoration: none; font-weight: bold; font-style:italic; }  A:link { TEXT-DECORATION: none; font-weight: bold;} A:visited {TEXT-DECORATION: none; font-weight: bold;} </style>");  
MsgBox.document.write ("<script type='text/javascript' src='Dokumente/Scripts/loader.js'></script><BODY onLoad='javascript:load3()' background-attachment=fixed BACKGROUND=Dokumente/Bilder/bg.jpg LINK=#4682b4 TEXT=#4682b4 VLINK=#999999 ALINK=#4682b4 BGCOLOR=#000000><script>document.body.style.cssText='border:10 ridge #4682b4'; </script>")  
MsgBox.document.write ("<center><table bgcolor=000000 style='filter:alpha(opacity=75); -moz-opacity:0.75; opacity:0.75; -khtml-opacity:0.75;' > <colgroup> <col width='1000'> <col height='500'> </colgroup> <tr> <td><br><font face='Arial, Helvetica, sans-serif' size='8'><CENTER><b>Suchergebnisse</b></CENTER></font></td> </tr></center>")  
MsgBox.document.write ("<div style='position: relative; width:400px; background-color: #C0C0C0; border: solid 1px #000000;'><span id='counter3' style='position: absolute; width: 100%; z-index: 3; text-align: center; font-weight: bold;'>0%</span> <div id='status3' style='position: relative; background-image: url(Dokumente/Bilder/hi.gif); width:0px; height: 20px; border-right: solid 1px #000000; z-index: 2;'></div></div>")  

Dann folgen weitere Ausgaben...

Die aufgerufene js Datei sieht so aus:

  
  
var zaehler = 1;  
var ziel = 400;  
function load3() {  
 if ( zaehler < ziel) {  
  zaehler = zaehler + 0.2;  
  document.getElementById("status3").style.width = zaehler + "px";  
 var prozent = Math.round( zaehler/ziel * 100);  
  document.getElementById("counter3").innerHTML = prozent+" %";  
  window.setTimeout("load3('" + ziel + "')", 25);  
 }  
 else {  
  zaehler = 1;  
 }  
}  
function fertig()  
{  
zaehler = 399;  
}

Problem ist nun das ich wenn das Fenster generiert wird zwar den Ladebalken sehe allerdings ohne Wertänderung.
Wenn dann im Fenster alle Einträge gemacht sind und ich über rechtsklick dieses fenster aktualisiere läuft auch los.
Die Funktion Fertig wird im moment noch nicht von mir aufgerufen soll aber später dafür sorgen das der Ladebalken voll ist wenn der Letzte Eintrag geladen ist.

Meine Frage an der Stelle kann sowas überhaupt funktionieren?
Woran liegt es das beim Ausgeben der Ladebalken nicht gestartet wird sondern erst beim aktualisieren?
Was klar ein Problem ist das der Ladebalken erst  "onload" gestartet wird also erst wenn die Seite fertig aufgebaut ist, wie kann ich das besser anstellen?

Falls es auf diese weise nicht geht hat jemand eine Idee wie man sowas umsetzen kann? Problem ist auch das ich nicht weiß wie lang die Anfrage dauert kann auch in 1sec fertig sein.

Voarab viel dank

  1. Hallo und guten Morgen!

    Was klar ein Problem ist das der Ladebalken erst  "onload" gestartet wird also erst wenn die Seite fertig aufgebaut ist, wie kann ich das besser anstellen?

    Wieso rufst du die Funktion load3() nicht auch erst bei onload und dann nach dem Ladebalken auf?

    Grüße, Matze

    1. Hallo Matze,

      danke für deine Antwort aber leider werde ich da nicht ganz schlau draus.

      Wieso rufst du die Funktion load3() nicht auch erst bei onload und dann nach dem Ladebalken auf?

      Ich habe jetzt schon mal verschiedene andere konstallationen versucht allerdings alle ohne erfolg.

      1te:

        
      MsgBox.document.write ("<div style='width:400px; background-color: #C0C0C0; border: solid 1px #000000;'><span id='counter3' style='position: absolute; width: 100%; z-index: 3; text-align: center; font-weight: bold;'>0%</span> <div id='status3' style='position: relative; background-image: url(Dokumente/Bilder/hi.gif); width:0px; height: 20px; border-right: solid 1px #000000; z-index: 2;'></div></div>")  
        
      MsgBox.document.write ("<Body onLoad='javascript:load3()'> </Body><br><br></table><br>");
      

      hier ist das Verhalten wie vorher.

      2te:

        
      MsgBox.document.write ("<div style='width:400px; background-color: #C0C0C0; border: solid 1px #000000;'><span id='counter3' style='position: absolute; width: 100%; z-index: 3; text-align: center; font-weight: bold;'>0%</span> <div id='status3' onLoad='javascript:load3()' style='position: relative; background-image: url(Dokumente/Bilder/hi.gif); width:0px; height: 20px; border-right: solid 1px #000000; z-index: 2;'></div></div>")  
      
      

      Hier startet der Zähler auch beim aktualisieren nicht mehr.

      Gruß Andre

      1. Hat sich erledigt.
        Habs hinbekommen.