Raile: Ladesequenz

Beitrag lesen

Hallo zusammen,

Ich würde in meine Homepage gerne eine Ladesequenz erstellen. Dort werden dann alle Bilder etc. geladen, und das soll mit einem Fortschritsbalken gezeigt werden. Ich habe keine Ahnung wie so was geht, ich habs aber ein paar mal schon gesehn.

Ich bin mir sicher das es wahrscheinlich zu kompliziert ist alles schnell zu erklären, deshalb frag ich ob jemand gute Links zu Seiten kennt wo drin steht wie so was gemacht wird.

Danke

Federico

Hallo Ihr,
bin hier völlig neu in diesem interessanten Forum.

Ich habe da mal einen solchen Balken geschrieben. Der Code sieht so aus:

var Timer ;
var startPosBalk = 322 ;
var endPosBalk = 618 ;
var aktPosBalk ;
var pixPosBalk = 5 ;
var DIVBalk = 1 ;
var balkSteps ;

function MoveBalk()
{

line = '<FONT SIZE=1 FACE="ARIAL" COLOR=#000000><B>'+balkSteps+'</B></FONT>' ;
   balkSteps-- ;
   if (NS)
      {
      document.layers.Balk3.document.write(line)  ;
      document.layers.Balk3.document.close()  ;
      }
   else
      {
      Balk3.innerHTML = line ;
      }
   aktPosBalk += pixPosBalk ;
   if (aktPosBalk >= endPosBalk)
      {
      if (NS)
         {
         window.document.layers[DIVBalk].left = endPosBalk ; ;
         }
      else
         {
         layers[DIVBalk].style.left = endPosBalk ;
         }
      window.clearInterval(Timer) ;
      return ;
      }
   if (NS)
      {
      window.document.layers[DIVBalk].left = aktPosBalk ; ;
      }
   else
      {
      layers[DIVBalk].style.left = aktPosBalk ;
      }
}

function StartBalk(totTime)
{
   balkSteps = Math.floor((endPosBalk - startPosBalk) / pixPosBalk) ;
   var singleStep = totTime / balkSteps ;
   var moveTime = 1000 * singleStep ;

aktPosBalk = startPosBalk ;
   Timer = window.setInterval("MoveBalk()",moveTime) ;
}

Und der entsprechende HTML-Code:

<BODY BGCOLOR=#003399 BACKGROUND="images/back1.gif" onLoad="StartBalk(5)">

...
<DIV ID="Balk1" STYLE="position:absolute; top:440px; left:318px; width:314; height:18; zIndex:0;">
<IMG SRC="images/balken-1.gif">
</DIV>
<DIV ID="Balk2" STYLE="position:absolute; top:439px; left:322px; width:10; height:10; zIndex:1;">
<IMG SRC="images/balken-2.gif">
</DIV>
<DIV ID="Balk3" STYLE="position:absolute; top:443px; left:465px; width:40; height:10; zIndex:1;">
</DIV>
....

Viele Grüsse

Raile