[Suche] JavaScript - Ladebalken für die Seite

  • Möp!

    Ich wollte es so machen, dass erst ein Ladebalken auf der Seite erscheint, bis alle Bilder geladen sind, der Inhalt und alles drum und dran und dann erst die Seite angezeigt wird. Wie geht sowat?

    Hab mich mit js noch net beschäftigt, deshalb wärs nett wenn jemand dafür ein script kennt.

    Danköö!

  • Moin
    Ja, das geht.

    Code
    <div id="loading" style="visibility:hidden;">[img]URLZURGRAFIK[/img]</div>
    <script type="text/javascript">
    document.getElementById('loading').style.visibility = 'visible';
    </script>


    Diesen Code direkt unter <body> einfügen.

    Code
    <script type="text/javascript">
    document.getElementById('loading').style.visibility = 'hidden';
    </script>

    Diesen direkt vor </body>.
    Müsste so gehen.
    Da kannst du ja noch evtl. das Div mit CSS anpassen.

  • Da isses aber so, dass die Grafiken schon angezeigt werden beim laden, oder?
    Es soll so sein, dass die Seite erst erscheint, wenn alle Bilder komplett geladen sind, verstehst? Geht sowat?

  • ich mein vom prinzip her. erst kommt so ein balken, egal womit gemacht und wenn alles geladen ist verschwindet der loadbalken und die gallerie erscheint

  • Zitat von DarkSyranus

    Hm, wie meinst du dass?
    Etwa so das man erst nur grau, oder sonst was sieht und dann wenn fertig geladen wurde, die Seite erscheint?
    Das könnte man machen.
    Erzähl mal genau wie du dir das vorstellst.

    Genau sowas ;)
    Das wäre perfekt wenn das gehen würde!

  • Das was du brauchst nennt sich Preloader!
    Also wenn dir meine Antwort nicht hilft einfach googlen!

    Also du öffnest dein Editor und schreibt einfach folgendes rein


    einfach nur so ohne <html></html> etc.pp nur so
    dann speicherst du das meinetwegen unter preoloader.js einfach das.js hinten dranschreiben.
    und in der datei wo das angewendet werden soll also meinetwegen index.php oder so
    dann schreibst du in den head:

    Code
    <script src="preloader.js" type="text/javascript"></script>


    dann schreibst du in den body tag

    Code
    <body onload="preloader()">


    und direkt nach dem body tag also als aller aller erstes dann folgendes:

  • Hmm, is schon recht gut. Allerdings bleibt die Meldung mit dem "Page Loading ... Please Wait" und verschwindet nicht sobald die Seite geladen ist :( !?!

  • Teste das mal:

    Im Head:

    Der Body:

    Hier noch die Grafik: [Blockierte Grafik: http://www.web-toolbox.net/webtoolbox/images/loading01.gif]

    wissen ist macht, nichts wissen macht auch nichts...

  • Habe was gefunden ^^

    Code
    <script type="text/javascript">
    <!--
    setTimeout("ap_showWaitMessage('waitDiv', 0);",800)
    //-->
    </script>

    Nun zu meiner Frage ist das so richtig ??

  • Hmm, is schon recht gut. Allerdings bleibt die Meldung mit dem "Page Loading ... Please Wait" und verschwindet nicht sobald die Seite geladen ist :( !?!


    Gar nicht war!!!