• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Grafik während des Ladens anzeigen?

Status
Für weitere Antworten geschlossen.
H

hansi3000

Neues Mitglied
Ich habe eine Frage , und zwar wollte ich mir ne richtig aufwenig-schöne-gute website machen die natürlich auch ne ladegrafik haben soll, nur wie geht das das die nur während des Ladens angezeigt wird?

Z.B. sollten solche Grafiken angezeigtr werden:

bert2.gifclock.gifbar.gifsnake.gif
 
In meinen Augen ergibt sowas nur Sinn, wenn Inhalte dynamisch (Ajax) nachgeladen werden. Beim ersten Laden einer normalen HTML-Seite halte ich es für überflüssig und wenig benutzerfreundlich. (Ein Besucher könnte ja bereits anfangen, die Seite zu lesen, auch wenn noch nicht alle Elemente geladen wurden.)

Möglich ist es aber. Quick & dirty:

Code: 
<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>New</title>
        <script type="text/javascript">
        // Ladegrafik vorladen
        var preloadImage = new Image();
        preloadImage.src = "http://www.html.de/attachments/javascript-ajax-und-dhtml/1510d1276342311-grafik-waehrend-des-ladens-anzeigen-bar.gif";

        // Diese Funktion wird erst ausgeführt, wenn das große Bild vollständig
        // geladen wurde
        window.onload = function () {
            document.getElementById('loader').style.display = 'none';
            document.getElementById('content').style.display = 'block';
        };
        </script>
    </head>

    <body>
        <div id="loader">
            <p>Lade</p>
            <img src="http://www.html.de/attachments/javascript-ajax-und-dhtml/1510d1276342311-grafik-waehrend-des-ladens-anzeigen-bar.gif" />
        </div>

        <div id="content">
            <img src="http://www.artsjournal.com/tobias/%20Vermeer_The%20Milkmaid_reduced.jpg" />
        </div>

        <script type="text/javascript">
        // Für den Ladevorgang Lade-Benachrichtigung anzeigen und Inhalt
        // ausblenden. Da dieser Code Elemente des DOM-Trees anspricht, muss er
        // nach diesen definiert werden (also weiter unten stehen).
        document.getElementById('loader').style.display = 'block';
        document.getElementById('content').style.display = 'none';
        </script>
    </body>

</html>

PS: Bitte daran denken, dass Browser Dinge cachen.
 
Aber nur, wenn tatsächlich etwas nachgeladen wird. Also etwas im Hintergrund passiert, da du damit dem Nutzer anzeigen kannst, das etwas passiert, was er sonst nicht sehen würde. In allen anderen Fällen zeigst du damit nur deine unprofessionalität beim Webdesign.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben