MKay: Fortschritt-Anzeige

Hi,

ich lese mich gerade durch das JavaScript OpenBook von GalileoComputing.
Dort gibt es einen Code zur Fortschrittsanzeige, die sich auf das Laden der Bilder bezieht.

Der sieht so aus:

<html>  
<head>  
<title>Fortschrittsanzeige</title>  
<script type="text/javascript"><!--  
function fortschritt() {  
   var gesamt = document.images.length;  
   var geladen = 0;  
   for (var i=0; i<gesamt; i++) {  
      if (document.images[i].complete) {  
         geladen++;  
      }  
   }  
    if (gesamt > 0) {  
      window.alert("Geladen: " +  
                      Math.round(100*geladen/gesamt) + "%");  
    }  
   if (gesamt > geladen) {  
      setTimeout("fortschritt();", 500);  
   }  
}  
//--></script>  
</head>  
<body onload="fortschritt();">  
<img src="http://test.com/bild.php?1" />  
<img src="http://test.com/bild.php?1" />  
<img src="http://test.com/bild.php?1" />  
</body>  
</html>

Das einzige was ich verändert habe ist zunächst die Fortschrittsausgabe. Die gebe ich mit "alert()" aus, anstatt in der Statuszeile.
Die Bilder als php liegen auf meinem Server. In dem php-Script ist ein sleep eingebaut, damit ich besser betrachten kann, ob die Anzeige funktioniert.
Doch obiger Code lädt 9 Sekunden lang die Grafiken und gibt mir dann die Meldung "Geladen 100%", anstatt den Fortschritt schrittweise anzuzeigen.
So geht mir das mit allen Fortschritts-Anzeigen des Galileo-Openbooks:
http://www.galileocomputing.de/openbook/javascript_ajax/11_grafiken_005.htm#d5d6946f2141b10faeb168a86fc7b91c

Weiss jemand woran das liegt? Evtl an dem onload()-Event-Handler?

PS: Ich benutze den FF.

Gruss
MKay

  1. Hallo MKay,

    <body onload="fortschritt();">

    Weiss jemand woran das liegt? Evtl an dem onload()-Event-Handler?

    ich glaube, ja. Der onload im body feuert erst, wenn die ganze Seite, einschließlich Bildern, geladen ist. Starte "fortschritt(); doch einfach auch das erste mal per "setTimeout".

    Gruß, Jürgen

    1. Hi Jürgen,

      danke für deine Antwort. Sowas habe ich mir schon gedacht. Ich frage mich nur warum sowas dann auf diese Weise in einem Buch gezeigt wird, wenn es gar nicht funktionieren kann.

      Das mit dem TimeOut habe ich ausprobiert. Dieser erste Timeout wird problemlos ausgeführt.
      Der alte Timeout jedoch, wo sich die Funktion sozusagen selbst aufruft funktioniert nicht. Er sagt, dass die function nicht bekannt ist.

      Was kann ich da machen?

      Gruss
      MKay

      1. Hallo MKay,

        was meldet denn die Fehlerkonsole?

        Gruß, Jürgen

        1. was meldet denn die Fehlerkonsole?

          Fehler: fortschritt is not defined

          Und zwar in der Zeile "setTimeout("fortschritt();", 500);" in der Funnktion fortschritt() selbst.

          Gruss
          MKay

          1. Hallo MKay,

            keine Ahnung im Moment, was da faul ist. Kannst Du die Seite mal online stellen, damit man sich das ansehen kann?

            Gruß, Jürgen

            1. hm, komisch, wenn ich statt der lang-ladenen Bilder "normale" Bilder angebe, dann kommt der Fehler nicht, aber er lädt endlos weiter:

              <html>  
              <head>  
              <title>Fortschrittsanzeige</title>  
              <script type="text/javascript"><!--  
                
              function fortschritt() {  
                 var gesamt = document.images.length;  
                 var geladen = 0;  
                 for (var i=0; i<gesamt; i++) {  
                    if (document.images[i].complete) {  
                       geladen++;  
                    }  
                 }  
                  if (gesamt > 0) {  
                    document.write("Geladen: " +  
                                    Math.round(100*geladen/gesamt) + "% (" + geladen + "/" + gesamt + ")");  
                 }  
                 if (gesamt > geladen) {  
                    setTimeout("fortschritt();", 500);  
                 }  
              }  
              setTimeout("fortschritt();", 500);  
                
              //--></script>  
              </head>  
              <body>  
              <img src="1" />  
              <img src="2" />  
              </body>  
              </html>
              
              1. hm, komisch, wenn ich statt der lang-ladenen Bilder "normale" Bilder angebe, dann kommt der Fehler nicht, aber er lädt endlos weiter:

                Logisch. Du überschreibst dein gesamtes Dokument an dieser Stelle:

                [code lang=javascript]
                    if (gesamt > 0) {
                      document.write("Geladen: " +
                                      Math.round(100*geladen/gesamt) + "% (" + geladen + "/" + gesamt + ")");
                   }

                Wirf mal einen Blick in den Quelltext der fehlerhaften Seite.

                Siechfred

                1. Wirf mal einen Blick in den Quelltext der fehlerhaften Seite.

                  Wo ist denn da ein Fehler? :)

                  1. Wirf mal einen Blick in den Quelltext der fehlerhaften Seite.
                    Wo ist denn da ein Fehler? :)

                    http://de.selfhtml.org/javascript/objekte/document.htm#write
                    Du überschreibst mit der Anweisung das *komplette* HTML inklusive Javascript. Damit ist deine Funktion "fortschritt" im Datennirvana, was dir auch die von dir gepostete Fehlermeldung sagt. Der Quelltext deiner Seite sieht nach dem ersten Durchlauf etwa so aus:

                    Geladen: 50% (1/2);

                    Das ist alles aber keine gültige HTML-Seite :)

                    Siechfred

                    1. Ah, alles klar, okay. So klappts auch mit den Nachbarn ;)

                      Danköö

  2. Hi,

    ich lese mich gerade durch das JavaScript OpenBook von GalileoComputing.

    danke für die Warnung.

    Dort gibt es einen Code zur Fortschrittsanzeige, die sich auf das Laden der Bilder bezieht.

    Sowas wird da tatsächlich empfohlen? Steht auch etwas über die Sinnhaftigkeit von derlei Dingen darin?

    <img src="http://test.com/bild.php?1" />

    ERROR: Required attribute "alt" missing.

    Doch obiger Code lädt 9 Sekunden lang die Grafiken und gibt mir dann die Meldung "Geladen 100%", anstatt den Fortschritt schrittweise anzuzeigen.

    Wieso eigentlich "die" Grafiken? Ich sehe nur eine einzige.

    Weiss jemand woran das liegt? Evtl an dem onload()-Event-Handler?

    Du meinst an dem Event-Handler, der erst dann feuert, wenn 100% der Grafiken geladen wurden? Ja, das könnte in der Tat sein.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Sowas wird da tatsächlich empfohlen? Steht auch etwas über die Sinnhaftigkeit von derlei Dingen darin?

      Darum gehts doch gar net. Es geht ums Prinzip. Empfohlen wird da nichts.

      ERROR: Required attribute "alt" missing.

      Das dürfte hier egal sein. OT

      Wieso eigentlich "die" Grafiken? Ich sehe nur eine einzige.

      Bei mir ruft er die Bilder 3 mal ab, deswegen Mehrzahl. Auch wenn es so aussieht, als wenn er nur eins lädt.

      Du meinst an dem Event-Handler, der erst dann feuert, wenn 100% der Grafiken geladen wurden? Ja, das könnte in der Tat sein.

      Das ist das was ich hören wollte. Also wird der Event-Handler erst dann aufgerufen, wenn meine Seite inklusive aller Grafiken geladen wird?
      Was haben die Beispiele dann für einen Sinn? ...

      Gruss
      MKay

      1. Hi,

        Was haben die Beispiele dann für einen Sinn? ...

        Vielleicht ist für das Buch diese Vorgehensweise angebracht ...

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        O o ostern ...
        Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
      2. hi,

        Steht auch etwas über die Sinnhaftigkeit von derlei Dingen darin?

        Darum gehts doch gar net. Es geht ums Prinzip.

        Also nicht um den Sinn.

        Also wird der Event-Handler erst dann aufgerufen, wenn meine Seite inklusive aller Grafiken geladen wird?
        Was haben die Beispiele dann für einen Sinn? ...

        ... und jetzt fragst du doch wieder nach einem solchen?

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        1. Naja, in dem Buch sollten Möglichkeiten gezeigt werden, was man machen könnte bzw. was auch funktioniert.

          Ob man das gebrauchen kann ist ja eine andere Sachen als die Frage, ob es denn funktioniert.
          Ist das so schwer zu verstehen?

  3. Hi MKay!

    Bitte lass diese Funktion; wenn sie mal funktionieren sollte, erzeugt sie alle 0.5 Sekunden eine Alert Box, in der dann (statisch) der bisherige Forschritt steht - welcher btw falsch ist: es wird nur ermittelt, wieviele Grafiken von den vorhandenen Grafiken geladen wurden. Habe ich nun 3 Grafiken mit Grössen = (1kB, 1kB, 20MB) so zeigt der Fortschritt nach der zweiten Grafik 66%... was für ein Käse.

    Ich kann mir fast nichts geileres Vorstellen um einen Anwender todesmäßig zu nerven.

    Grüsse,
    Richard

    1. Bitte lass diese Funktion; wenn sie mal funktionieren sollte, erzeugt sie alle 0.5 Sekunden eine Alert Box

      Das ist schon klar :D Die Alert-Box ist ja nur zum Debuggen eingebaut. Normalerweise kommt eine Text-Ausgabe irgendwo auf dem Document.

      »»in der dann (statisch) der bisherige Forschritt steht - welcher btw falsch ist: es wird nur ermittelt, wieviele Grafiken von den vorhandenen Grafiken geladen wurden. Habe ich nun 3 Grafiken mit Grössen = (1kB, 1kB, 20MB) so zeigt der Fortschritt nach der zweiten Grafik 66%... was für ein Käse.
      Das ist auch klar ;) Es geht ja ums Prinzip. Ich lese das Buch und versuche es zu verstehen. Aber wenn es nicht funktioniert, hat das keinen besonderen Lernerfolg^^
      Deswegen möchte ich ja nur wissen, warum es nicht funktioniert^

    2. Hi,

      Bitte lass diese Funktion; wenn sie mal funktionieren sollte, erzeugt sie alle 0.5 Sekunden eine Alert Box, in der dann (statisch) der bisherige Forschritt steht - welcher btw falsch ist: es wird nur ermittelt, wieviele Grafiken von den vorhandenen Grafiken geladen wurden. Habe ich nun 3 Grafiken mit Grössen = (1kB, 1kB, 20MB) so zeigt der Fortschritt nach der zweiten Grafik 66%... was für ein Käse.

      Angenehm dürfte es im IE oder Opera werden, wenn ein Bild gar nicht geladen werden kann - laut http://de.selfhtml.org/javascript/objekte/images.htm#complete wird für diese Bilder complete dann nie true ...

      cu,
      Andreas

      --
      Warum nennt sich Andreas hier MudGuard?
      O o ostern ...
      Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.