Federico: Ladesequenz

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

  1. 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 hab das auch schon mal gesehen.
    das ist meistens FLASHprogrammiert

    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

    1. Hallo,

      Ja ne, das geht auch sicher mit Java-Script. Mit Flash könnte ich es auch aber ich will das nicht.

      Federico

  2. Hallo,

    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.

    Wenn du JS kannst, könntest du per timeout paar mal abfragen, ob die bilder exestieren oder noch nicht, und wenn halt z.B. die farbe eines div's ändern, der mit paar anderen in der reihe steht. Oder/und die Prozentangabe ändern. Sonst gint's bestimmt viele davon in einer dieser unzähligen scriptseiten, einfach mal googlen.
    Grüße aus Düsseldorf,

    --
    Aleksej
  3. 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