Blockade bei Umsetzung eines zu begrenzenden Fortschrittsbalkens

[Enrico]

Hallo,

ich möchte über Javascript eine Fortschrittsanzeige umsetzen, die angezeigt wird, während Grafiken vorgeladen werden.

Da ich aber Grafiken unterschiedlicher Ordner vorladen will, es handelt sich bei unserer Homepage um einen Onlineshop, bei dem die Artikelbilder in verschiedenen Ordnern abgelegt sind, habe ich natürlich auch unterschiedliche Anzahlen vorzuladender Grafiken.

Damit die Fortschrittsanzeige aber nicht zu breit wird, möchte ich diese in der Breite begrenzen.

Auf ein Framework oder Plugin möchte ich hierbei verzichten, da mir diese zu überladen sind.

Ich habe mir überlegt, eine maximale Anzahl an anzuzeigenden Segmenten festzulegen und die Schrittweite bei der Ausgabe der Fortschrittsanzeige über den letzten ganzzahligen Teiler vor Erreichen der maximalen Anzahl an anzuzeigenden Segmenten zu ermitteln.

Hier der Code, den ich bislang habe:

  
   function FortschrittsbalkenBerechnen (AnzahlGrafiken, AnzahlSegmente)  
   {  
      if (AnzahlGrafiken < AnzahlSegmente)  
         AnzahlSegmente = AnzahlGrafiken;  
  
      ArrayTeiler = new Array ();  
  
      for (i = 1; i < AnzahlSegmente; i++)  
      {  
         if (AnzahlGrafiken % i == 0)  
            ArrayTeiler.push(i);  
      }  
  
      for (i = 0, l = ArrayTeiler.length; i < l; i++)  
      {  
         if (ArrayTeiler[i] < AnzahlSegmente)  
            BreiteFortschrittsbalken = ArrayTeiler[i];  
         else  
            break;  
      }  
  
      FortschrittsbalkenInitialisieren (BreiteFortschrittsbalken)  
   }  
  
   function FortschrittsbalkenInitialisieren (BreiteFortschrittsbalken)  
   {  
      // ??? Schrittweite = AnzahlGrafiken / BreiteFortschrittsbalken;  
  
      Fortschrittsbalken  = '<table cellspacing="0">';  
      Fortschrittsbalken += "<tr>";  
      Fortschrittsbalken += '<td class="ErstesSegment0" id="P0"></td>';  
  
      Zaehler = 1;  
  
      for (i = 1, l = BreiteFortschrittsbalken - 1; i < l; i++)  
      {  
         Fortschrittsbalken += '<td class="WeiteresSegment0" id="P' + Zaehler + '"></td>';  
  
         Zaehler += 1;  
      }  
  
      Fortschrittsbalken += '<td class="LetztesSegment0" id="P' + (Zaehler + 1) + '"></td>';  
      Fortschrittsbalken += "</tr>";  
      Fortschrittsbalken += "</table>";  
  
      document.write (Fortschrittsbalken);  
  
      // Funktion zum Vorladen der Grafiken mit Aktualisierung der Fortschrittsanzeige  
   }  
  
   Grafiken = new Array ("...", "...", "...", ...);  
  
   FortschrittsbalkenBerechnen (Grafiken.length, 150);  

Mit "FortschrittsbalkenBerechnen (131, 150);" würde ich beispielsweise angeben, dass 131 Grafiken vorzuladen sind und die Fortschrittsanzeige maximal 150px breit sein soll.

"ErstesSegment0", "WeiteresSegment0" und "LetztesSegment0" sind hierbei die Grafiken für noch nicht geladene Grafiken.

Mein Problem ist nun, dass ich eine Denkblockade habe, wie ich den Mechanimus umsetzen muss, um nun alle vorzuladenden Grafiken mit der Fortschrittsanzeige, die nur alle {Schrittweite} Grafiken angepasst werden soll, in Einklang bringe.

Ich denke hierbei an folgenden Ansatz:

  
   for (i = 0; i < AnzahlGrafiken; i++)  
   {  
      var Grafik = new Image();  
  
      Grafik.onload = function ()  
      {  
         if (i == 0)  
            document.getElementById("P" + ???).class = "ErstesSegment1";  
         else  
            if (i < AnzahlGrafiken)  
            {  
               if (i % Schrittweite == 0)  
                  document.getElementById("P" + ???).class = "WeiteresSegment1";  
            }  
            else  
               document.getElementById("P" + ???).class = "LetztesSegment1";  
      };  
  
      Grafik.src = "...";  
   }  

Analog zu "ErstesSegment0", "WeiteresSegment0" und "LetztesSegment0" sind hierbei "ErstesSegment1", "WeiteresSegment1" und "LetztesSegment1" die Grafiken für ordnungsgemäß geladene Grafiken.

Bin ich mit meinem Ansatz auf dem richtigen Weg, mein Vorhaben umzusetzen?
Könnt ihr mir bei meinen kleinen Baustellen weiterhelfen?

An dieser Stelle schon mal vielen Dank für Ihre Hilfe.

Gruß,
Enrico

[Matthias Apsel]

Om nah hoo pez nyeetz, Enrico!

Fortschrittsbalken  = '<table cellspacing="0">';

Tabellen sind für die Darstellung tabellelarischer Daten gedacht, nicht zur Gestaltung des Dokuments. Für aktuelle Browser gibt es das progress-Element, ob HTML5shiv die Unterstützung des Progress-Elements, insbesondere für die notwendigen value- und max-Attribute, mitbringt, entzieht sich meiner Kenntnis. Falls nicht, könnte man ein geeignetes Element, möglicherweise sogar progress selbst entsprechend gestalten. (gradient). Falls auch das noch zu modern ist hilft die Struktur zweier verschachtelteter Elemente. Dann ließen sich sogar Sterne teilweise füllen.

Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, Matthias Apsel!

http://wiki.selfhtml.org/wiki/HTML/Formulare/progress

Matthias