Matt: Preloader Idee

Hello,

mir fehlt die genau Umsetzung bzw. das wissen im Javascript um zu realisieren was ich vorhabe.
Ich würde gerne solange die Seite geladen wird (keine Bilder vorladen, sondern solange die Scripts ausgeführt werden) etwas wie ein Ladebalken (animiertes Gif) einbinden. Sobald fertig geladen wurde, soll es ausgeblendet werden (display:none)...

Hoffe ihr könnt mir helfen!

Danke

Grüße Matt

  1. hi,

    Ich würde gerne solange die Seite geladen wird (keine Bilder vorladen, sondern solange die Scripts ausgeführt werden)

    Welche Scripte meinst du? Serverseitige?

    etwas wie ein Ladebalken (animiertes Gif) einbinden. Sobald fertig geladen wurde, soll es ausgeblendet werden (display:none)...

    Der Event onload feuert, nachdem das Dokument und alle externen Ressourcen fertig geladen wurden - damit könntest du also deinen Ladebalken entfernen.
    Vorher musst du dir aber erst noch eine Möglichkeit suchen, ihn erst mal angezeigt zu bekommen - und das geht wohl erst, wenn das Dokument zumindest in Grundzügen bereits aufgebaut wurde.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. danke für deine Hilfe

      Welche Scripte meinst du? Serverseitige?

      Ja, es werden serverseitige Scripte ausgeführt (u.A. Batch-Datei).

      »»Vorher musst du dir aber erst noch eine Möglichkeit suchen, ihn

      erst mal angezeigt zu bekommen - und das geht wohl erst, wenn
      das Dokument zumindest in Grundzügen bereits aufgebaut wurde.

      Genau diese Lösung suche ich ;)

      Grüße,
      Matt

      1. hi,

        Vorher musst du dir aber erst noch eine Möglichkeit suchen, ihn
        erst mal angezeigt zu bekommen - und das geht wohl erst, wenn
        das Dokument zumindest in Grundzügen bereits aufgebaut wurde.
        Genau diese Lösung suche ich ;)

        Du könntest in einem kurzen Zeitintervall immer wieder prüfen, ob document.body bereits existiert, und ob das einhängen eines neuen Elementes in diesen mittels appendChild erfolgreich ist.
        Ob dass dann allerdings auch schon vom Browser gerendert wird, bevor er mit dem kompletten laden zumindest des Dokumentes fertig ist, bleibt fraglich.

        Ja, es werden serverseitige Scripte ausgeführt (u.A. Batch-Datei).

        Muss die Seitenübertragung an den Client darauf "warten"?

        Evtl. hilft es ja weiter, wenn du erst mal den HTML-Code rausschickst (Stichwort: flush), und dann erst anschließend die weiteren zeitaufwendigeren serverseitigen Aktionen durchführst.

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        1. Moin!

          Du könntest in einem kurzen Zeitintervall immer wieder prüfen, ob document.body bereits existiert, und ob das einhängen eines neuen Elementes in diesen mittels appendChild erfolgreich ist.

          Warum das? Einfach simples HTML mit dem Ladebalkenbild als erstem Body-Element ausgeben, Positionierung, falls gewünscht, mit CSS (gerne auch im Attribut) - fertig. Onload dann ausblenden - fertig.

          - Sven Rautenberg

          --
          "Love your nation - respect the others."
          1. hi,

            Warum das? Einfach simples HTML mit dem Ladebalkenbild als erstem Body-Element ausgeben, Positionierung, falls gewünscht, mit CSS (gerne auch im Attribut) - fertig. Onload dann ausblenden - fertig.

            Das war mir vermutlich nur zu simpel, um drauf zu kommen :-)

            gruß,
            wahsaga

            --
            /voodoo.css:
            #GeorgeWBush { position:absolute; bottom:-6ft; }
          2. Warum das? Einfach simples HTML mit dem Ladebalkenbild als erstem Body-Element ausgeben, Positionierung, falls gewünscht, mit CSS (gerne auch im Attribut) - fertig. Onload dann ausblenden - fertig.

            • Sven Rautenberg

            Wie darf ich das verstehen, als erstes Body-Element ein Ladebalken?

            <body onload="anweisung ausblendung">
            !??ladebalken??!

            Das müsste dann doch vor dem <body> Tag stehen?

            Thanks for help!

            1. hi,

              Wie darf ich das verstehen, als erstes Body-Element ein Ladebalken?

              <body onload="anweisung ausblendung">
              !??ladebalken??!

              So (oder ähnlich):

              <body>
              <div id="ladebalken" style="...">...</div>

              Das müsste dann doch vor dem <body> Tag stehen?

              Nein, als erstes Element _im_ body - welches dann,, mit ein bisschen Glück, auch als erstes gerendert wird.

              gruß,
              wahsaga

              --
              /voodoo.css:
              #GeorgeWBush { position:absolute; bottom:-6ft; }
              1. <body>
                <div id="ladebalken" style="...">...</div>

                Allerdings ging ich davon aus, dass im <body> "onload" stehen muss? Das hieße ja, dass er zuerst denn OnLoad ausführt und dann den Ladebalken ausgibt... aber wenn ich im OnLoad sage er soll mir den Ausblenden, dann kann ich ihn auch nicht mehr in der folgenden Zeile nach <body> anzeigen?

                oder denke ich in  falscher Reihenfolge? ;)

                1. hi,

                  <body>
                  <div id="ladebalken" style="...">...</div>

                  Allerdings ging ich davon aus, dass im <body> "onload" stehen muss? Das hieße ja, dass er zuerst denn OnLoad ausführt und dann den Ladebalken ausgibt...

                  Wieso?
                  Was hat onload mit irgendwelchen Elementen zu tun, die sowieso schon im Body drinstehen?

                  aber wenn ich im OnLoad sage er soll mir den Ausblenden, dann kann ich ihn auch nicht mehr in der folgenden Zeile nach <body> anzeigen?

                  onload feuert dann, wenn "alles" fertig geladen wurde.
                  Beim dem laden würde also erst mal dein Ladebalken angezeigt werden (sofern der Vorschlag so funktioniert) - und wenn onload feuert, also alles fertig geladen ist, dann blendest du diesen Ladebalken aus.

                  gruß,
                  wahsaga

                  --
                  /voodoo.css:
                  #GeorgeWBush { position:absolute; bottom:-6ft; }
                  1. Wieso?
                    Was hat onload mit irgendwelchen Elementen zu tun, die sowieso schon im Body drinstehen?

                    aber wenn ich im OnLoad sage er soll mir den Ausblenden, dann kann ich ihn auch nicht mehr in der folgenden Zeile nach <body> anzeigen?

                    onload feuert dann, wenn "alles" fertig geladen wurde.
                    Beim dem laden würde also erst mal dein Ladebalken angezeigt werden (sofern der Vorschlag so funktioniert) - und wenn onload feuert, also alles fertig geladen ist, dann blendest du diesen Ladebalken aus.

                    gruß,
                    wahsaga

                    Für die Hilfe wirste mal kräftig durchgeknuddelt ;)
                    Ich danke dir!

                    Greetz Matt

                    1. Also das mit dem Ein- und Ausblenden funktioniert jetzt. Jedoch führt er zuerst die in PHP angegebenen exec('xxx.bat') aus, obwohl diese ganz unten im Code stehen??!

                      Er soll mir zunächst aber *Vorschau erzeugen* anzeigen...

                      Grüßé

                      1. hi,

                        Also das mit dem Ein- und Ausblenden funktioniert jetzt. Jedoch führt er zuerst die in PHP angegebenen exec('xxx.bat') aus, obwohl diese ganz unten im Code stehen??!

                        Wie schon gesagt, musst du PHP an einer passenden Stelle erst mal anweisen, den bisherigen Scriptoutput rauszuschicken - sonst läuft erst mal das ganze Script durch, und der Output geht danach erst an den Client raus.

                        gruß,
                        wahsaga

                        --
                        /voodoo.css:
                        #GeorgeWBush { position:absolute; bottom:-6ft; }
                      2. Moin!

                        Also das mit dem Ein- und Ausblenden funktioniert jetzt. Jedoch führt er zuerst die in PHP angegebenen exec('xxx.bat') aus, obwohl diese ganz unten im Code stehen??!

                        Er soll mir zunächst aber *Vorschau erzeugen* anzeigen...

                        Das ist ein übliches Phänomen, welches nur unter ganz kontrollierbaren Bedingungen durch das von wahsaga erwähnte vorzeitige Abschicken des Ausgabepuffers umgangen werden kann.

                        Üblicherweise wird das Anwendungsprinzip umgedreht: Die alte Seite, welche den Link enthält, blendet als letzte Aktion den Balken ein, die neue Seite wird dann einfach geladen und erscheint, wenn sie fertig ist.

                        - Sven Rautenberg

                        --
                        "Love your nation - respect the others."
          3. Hi,

            Warum das? Einfach simples HTML mit dem Ladebalkenbild als erstem Body-Element ausgeben, Positionierung, falls gewünscht, mit CSS (gerne auch im Attribut) - fertig.

            Wobei die Ausgabe aber per script (document.write reicht) erfolgen sollte.
            Denn

            Onload dann ausblenden

            erfordert eingeschaltetes Javascript. Wenn die Erzeugung des Ladebalkens nicht per script erfolgt, würde der Balken bei ausgeschaltetem Script permanent sichtbar bleiben.

            cu,
            Andreas

            --
            Warum nennt sich Andreas hier MudGuard?
            Schreinerei Waechter
            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.