Wie kann ich den Browser warten lassen, bis die Seite vollständig geladen ist?

78

Ich hasse es, wie man tatsächlich sehen kann, wie Webseiten geladen werden. Ich denke, es wäre viel ansprechender, zu warten, bis die Seite vollständig geladen und zur Anzeige bereit ist, einschließlich aller Skripte und Bilder, und sie dann vom Browser anzeigen zu lassen. Ich habe also zwei Fragen ...

  1. Wie kann ich das machen?
  2. Ich bin ein absoluter Neuling in der Webentwicklung, aber ist das gängige Praxis? Wenn nicht, warum?

Vielen Dank im Voraus für Ihre Weisheit!

javascript css web BeachRunnerFred
quelle
48
Ich mag es nicht, wie einige Seiten nichts zeigen, bis alles geladen ist. Machen Sie nicht den Fehler anzunehmen, dass die Benutzer genauso denken wie Sie.
Fredrik Mörk
8
Facebook macht das und es macht mich nur wütend.
Josh Stodola
8
Wenn Sie dies tun, stellen Sie zumindest sicher, dass Sie sofort eine Meldung anzeigen, dass die Seite geladen wird.
Tor Haugen
6
Sie sagen, Sie hassen es, die Seite laden zu sehen. Manchmal auch - wenn der Inhalt beim Laden herumspringt. Sie können dies minimieren, indem Sie explizite Größen für Ihre Bilder festlegen, damit der Browser weiß, wie viel Platz für sie übrig bleibt, und den Text nicht verschieben muss, um sie beim Laden aufzunehmen.
Nathan Long
In meinem Fall lädt meine Navigationsleiste die Bilder, aus denen sie besteht, jedes Mal neu, wenn Sie die Seite wechseln, und es sieht schrecklich aus, wenn die Seite alle paar Sekunden neu erstellt wird, wenn Sie auf einen Link klicken.
Tkbx

Antworten:

34

Dies ist aus all den genannten Gründen und mehr eine sehr schlechte Idee. Das heißt, wie Sie es mit jQuery machen :

<body>
<div id="msg" style="font-size:largest;">
<!-- you can set whatever style you want on this -->
Loading, please wait...
</div>
<div id="body" style="display:none;">
<!-- everything else -->
</div>
<script type="text/javascript">
$(document).ready(function() {
    $('#body').show();
    $('#msg').hide();
});
</script>
</body>

Wenn der Benutzer JavaScript deaktiviert hat, wird die Seite nie angezeigt. Wenn die Seite nie vollständig geladen wird, wird die Seite nie angezeigt. Wenn das Laden der Seite zu lange dauert, gehen sie möglicherweise davon aus, dass ein Fehler aufgetreten ist, und gehen einfach woanders hin, anstatt * bitte warten ... *.

Grant Wagner
quelle
11
Eine Möglichkeit, das Problem ohne Javascript mit dieser Lösung zu umgehen, besteht darin, die <noscript>Tags zu verwenden, um den display:noneEffekt "rückgängig zu machen" .
Chris Thompson
21

Ich denke, das ist eine wirklich schlechte Idee. Benutzer möchten den Fortschritt schlicht und einfach sehen. Wenn Sie die Seite einige Sekunden lang in einem Status halten und dann die geladene Seite sofort anzeigen, hat der Benutzer das Gefühl, dass nichts passiert, und Sie verlieren wahrscheinlich Besuche.

Eine Möglichkeit besteht darin, einen Ladestatus auf Ihrer Seite anzuzeigen, während Inhalte im Hintergrund verarbeitet werden. Dies ist jedoch normalerweise reserviert, wenn die Site bei Benutzereingaben tatsächlich verarbeitet wird.

http://www.webdeveloper.com/forum/showthread.php?t=180958

Unter dem Strich müssen Sie zumindest einige visuelle Aktivitäten zeigen, während die Seite geladen wird, und ich denke, dass das Laden der Seite in kleinen Stücken nicht allzu schlecht ist (vorausgesetzt, Sie tun nichts, was die Seite ernsthaft verlangsamt Ladezeit).

Robert Greiner
quelle
1
Ich habe eine Site entworfen, die einen leichten Spinner verwendet, während schwere Dinge geladen werden - die schweren Dinge sind auf eingestellt display: none. Sobald alles geladen ist, wird der Spinner ausgeblendet und der Inhalt eingeblendet. Dies funktioniert gut, da ein Spinner jetzt allgemein als "Laden, bitte warten" verstanden wird . Hinweis: Es wird jQuery verwendet.
ADTC
1
Ich finde es unfair, so zu verallgemeinern. Wenn Sie eine wirklich schnelle und bissige Website erstellen, ist es ärgerlich, dass der Browser beschließt, die Erfahrung zu ruinieren, indem er mehrere Frames einer unvollendeten gerenderten Website anzeigt. Ich denke, wir sollten uns um eine bessere Website und eine bessere Benutzererfahrung bemühen. Ich sage nicht, dass das Update ein gutes Update ist. Ich hätte viel lieber, dass die Browser warten, bis die Verarbeitung abgeschlossen ist. Und dann liegt es an der Website, sicherzustellen, dass ihre Scheiße gut optimiert ist und schnell geladen wird. Wir sollten keine Systeme bauen, damit Programmierer mit faulem und schlechtem Verhalten davonkommen können.
BjarkeCK
13

Hier ist eine Lösung mit jQuery:

<script type="text/javascript">
$('#container').css('opacity', 0);
$(window).load(function() {
  $('#container').css('opacity', 1);
});
</script>

Ich habe dieses Skript direkt nach meinem </body>Tag eingefügt. Ersetzen Sie einfach "#container" durch einen Selektor für die DOM-Elemente, die Sie ausblenden möchten. Ich habe verschiedene Variationen davon ausprobiert (einschließlich .hide()/ .show(), und .fadeOut()/ .fadeIn()), und nur das Einstellen der Deckkraft scheint die geringsten negativen Auswirkungen zu haben (Flimmern, Ändern der Seitenhöhe usw.). Sie können auch ersetzen css('opacity', 0)mit fadeTo(100, 1)für einen reibungslosen Übergang. (Nein,fadeIn() funktioniert nicht, zumindest nicht unter jQuery 1.3.2.)

Nun die Vorbehalte: Ich habe das oben Genannte implementiert, weil ich TypeKit verwende und es ein nerviges Flackern gibt, wenn Sie die Seite aktualisieren und das Laden der Schriftarten einige hundert Millisekunden dauert. Ich möchte also nicht, dass Text auf dem Bildschirm angezeigt wird, bis TypeKit geladen wurde. Aber offensichtlich haben Sie große Probleme, wenn Sie den obigen Code verwenden und etwas auf Ihrer Seite nicht geladen werden kann. Es gibt zwei offensichtliche Möglichkeiten, wie es verbessert werden könnte:

  1. Ein maximales Zeitlimit (z. B. 1 Sekunde), nach dem alles angezeigt wird, unabhängig davon, ob die Seite geladen ist oder nicht
  2. Eine Art Ladeanzeige (z. B. etwas von http://www.ajaxload.info/ )

Ich werde mich nicht darum kümmern, die Ladeanzeige hier zu implementieren, aber das Zeitlimit ist einfach. Fügen Sie dies einfach dem obigen Skript hinzu:

$(document).ready(function() {
  setTimeout('$("#container").css("opacity", 1)', 1000);
});

Im schlimmsten Fall dauert es also eine zusätzliche Sekunde, bis Ihre Seite angezeigt wird.

Trevor Burnham
quelle
10

Es gibt sicherlich eine gültige Verwendung dafür. Eine besteht darin, zu verhindern, dass Personen auf Links klicken oder JavaScript-Ereignisse verursachen, bis alle Seitenelemente und JavaScript geladen wurden.

Im IE können Sie Seitenübergänge verwenden, dh die Seite wird erst angezeigt, wenn sie vollständig geladen ist:

<meta http-equiv="Page-Enter" content="blendTrans(Duration=.01)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=.01)" />

Beachten Sie die kurze Dauer. Es reicht gerade aus, um sicherzustellen, dass die Seite erst angezeigt wird, wenn sie vollständig geladen ist.

In FireFox und anderen Browsern habe ich die Lösung verwendet, indem ich einen DIV erstellt habe, der der Größe der Seite entspricht und weiß ist, und dann ganz am Ende der Seite JavaScript eingefügt habe, das ihn verbirgt. Eine andere Möglichkeit wäre, jQuery zu verwenden und es ebenfalls auszublenden. Nicht so schmerzlos wie die IE-Lösung, aber beide funktionieren gut.

Keith Adler
quelle
Für die Firefox-Lösung: Was ist mit Benutzern, die Javascript deaktiviert haben?
ChristopheD
6
@ChristopheD Antwort: Die 10 Personen auf der Welt, die Javascript deaktivieren, können die Seite nicht sehen.
Bagofmilch
1
@ChristopheD Es scheint, dass viele Dinge von JS abhängen, so dass [zumindest für meine Site] es sowieso nicht richtig funktioniert.
Anonymer Pinguin
5

Fügen Sie unmittelbar nach Ihrem <body> -Tag so etwas hinzu ...

 <style> body  {opacity:0;}</style>

Und für das allererste in Ihrem <head> fügen Sie etwas hinzu wie ...

 <script>
  window.onload = function() {setTimeout(function(){document.body.style.opacity="100";},500);};
 </script>

Inwieweit dies eine gute oder eine schlechte Praxis ist, hängt von Ihren Besuchern und der Wartezeit ab.

Die Frage, die noch offen bleibt und ich sehe hier keine Antworten, ist, wie man sicher sein kann, dass sich die Seite stabilisiert hat. Wenn Sie beispielsweise Schriftarten laden, fließt die Seite möglicherweise ein wenig zurück, bis alle Schriftarten geladen und angezeigt werden. Ich würde gerne wissen, ob es ein Ereignis gibt, das mir mitteilt, dass das Rendern der Seite abgeschlossen ist.

Terry Riegel
quelle
4

Stellen Sie außerdem sicher, dass der Server die Seite puffert und dies nicht sofort tut (während der Erstellung) an den Client-Browser überträgt.

Da Sie Ihren Technologie-Stack nicht angegeben haben:

  • PHP: Schau in ob_start
  • ASP.NET: Stellen Sie sicher, dass Response.BufferOutput = True ist (standardmäßig).
ChristopheD
quelle
2
Beachten Sie, dass dies zwar beim Senden großer dynamisch erstellter HTML-Seiten hilfreich ist, dies jedoch nicht für 'externe' verknüpfte Bilder und Skripte / Stylesheets funktioniert (diese befinden sich jedoch nach dem Laden der ersten Seite trotzdem im Browser-Cache)
ChristopheD,
3

obligatorisch: "benutze jQuery"

Ich habe Seiten gesehen, auf denen ein schwarzes oder weißes Div, das alles abdeckt, oben auf der Seite platziert und dann im document.load-Ereignis entfernt wurde. Oder Sie könnten .ready in jQuery verwenden. Davon abgesehen war es eine der nervigsten Webseiten, die ich je gesehen habe. Ich würde davon abraten .

Neil N.
quelle
3

Sie können alles mit etwas CSS verstecken:

#some_div
{
  display: none;
}

und dann in Javascript eine Funktion zu document.onload zuweisen, um dieses div zu entfernen.

jQuery macht solche Dinge sehr einfach.

Der Eine
quelle
7
Wenn der Benutzer kein Javascript hat, wird er Ihre Seite natürlich nie sehen.
Nathan Long
3

Obwohl dies nicht immer eine gute Idee ist, können Sie frei entscheiden, ob Sie das wirklich wollen. Es gibt verschiedene Möglichkeiten, und ich habe hier ein einfaches Beispiel gefunden:

http://www.reconn.us/content/view/37/47/

Wahrscheinlich nicht die beste, aber es sollte Ihnen helfen, Ihre eigene Lösung zu entwickeln. Viel Glück.

Paulo Guedes
quelle
3

In PHP-Fusion Open Source CMS, http://www.php-fusion.co.uk , machen wir das im Kern so -

    <?php
        ob_start();
        // Your PHP codes here            
        ?>
        YOUR HTML HERE


        <?php 
        $html_output = ob_get_contents();
        ob_end_clean();
        echo $html_output;
    ?>

Sie können nicht sehen, dass nacheinander etwas geladen wird. Der einzige Lader ist Ihr Browser-Tab-Spinner, der alles sofort nach dem Laden anzeigt. Versuche es.

Diese Methode ist in HTML-Dateien vollständig kompatibel.

Abweichung
quelle
2

Zusätzlich zu Trevor Burnhams Antwort, wenn Sie sich mit deaktiviertem Javascript befassen und das Laden von CSS verzögern möchten

HTML5

<html class="no-js">

    <head>...</head>

    <body>

        <header>...</header>

        <main>...</main>

        <footer>...</footer>

    </body>

</html>

CSS

//at the beginning of the page

    .js main, .js footer{

        opacity:0;

    }

JAVASCRIPT 

//at the beginning of the page before loading jquery

    var h = document.querySelector("html");

    h.className += ' ' + 'js';

    h.className = h.className.replace(
    new RegExp('( |^)' + 'no-js' + '( |$)', 'g'), ' ').trim();

JQUERY 

//somewhere at the end of the page after loading jquery

        $(window).load(function() {

            $('main').css('opacity',1);
            $('footer').css('opacity',1);

        });

RESSOURCEN

RafaSashi
quelle
1

Während ich den anderen zustimme, dass Sie es nicht wollen sollten, erkläre ich nur kurz, was Sie tun können, um einen kleinen Unterschied zu machen, ohne den ganzen Weg zu gehen und tatsächlich zu blockieren Inhalte zu - vielleicht reicht dies aus, um beide zu behalten Sie und Ihre Besucher glücklich.

Der Browser beginnt mit dem Laden einer Seite und verarbeitet extern gespeicherte CSS und JS später, insbesondere wenn sich die Stelle, an der die CSS / JS verknüpft sind, an der richtigen Stelle befindet. (Ich denke, der Rat ist, js so spät wie möglich zu laden und externes CSS zu verwenden, das Sie in den Header laden). Wenn Sie nun einen Teil Ihres CSS und / oder JS haben, den Sie so schnell wie möglich anwenden möchten, fügen Sie diesen einfach in die Seite selbst ein. Dies widerspricht dem Rat von Leistungstools wie YSlow, erhöht jedoch wahrscheinlich die Änderung Ihrer Seite, die so angezeigt wird, wie Sie es möchten. Verwenden Sie dies nur, wenn es wirklich benötigt wird!

Simon Groenewolt
quelle
0

Sie können damit beginnen, dass die Hauptindexseite Ihrer Site nur die Meldung "Laden" enthält. Von hier aus können Sie mit Ajax den Inhalt Ihrer nächsten Seite abrufen und in die aktuelle Seite einbetten, nachdem Sie die Meldung "Laden" entfernt haben.

Möglicherweise können Sie davonkommen, indem Sie oben auf Ihrer Seite nur einen Container für das Laden von Nachrichten einfügen, der 100% breit / hoch ist, und dann das Div beim Laden vollständig entfernen.

Letzteres funktioniert möglicherweise nicht in beiden Situationen perfekt und hängt davon ab, wie der Browser Inhalte rendert.

Ich bin mir nicht ganz sicher, ob es eine gute Idee ist. Für einfache statische Seiten würde ich nicht sagen. Allerdings habe ich in letzter Zeit viele schwere Javascript-Sites von Designfirmen gesehen, die komplexe Animationen verwenden und nur eine Seite umfassen. Diese Sites verwenden eine Lademeldung, um darauf zu warten, dass alle Skripte / html / css geladen werden, damit die Seite wie erwartet funktioniert.


quelle
0

Verwenden Sie keine Anzeige: keine. Wenn Sie dies tun, werden Sie sehen, wie Bilder die Größe ändern / neu positionieren, wenn Sie die Show machen (). Verwenden Sie stattdessen Sichtbarkeit: Ausgeblendet, und es wird alles korrekt dargestellt, aber es wird erst sichtbar, wenn Sie es anweisen.

tbott
quelle
0

Hoffe, dieser Code wird helfen 

 <html>  
    <head>
        <style type="text/css">
          .js #flash {display: none;}
        </style>
        <script type="text/javascript">
          document.documentElement.className = 'js';
        </script>
      </head>
      <body>
        <!-- the rest of your code goes here -->

        <script type="text/javascript" src="/scripts/jquery.js"></script>
        <script type="text/javascript">
          // Stuff to do as soon as the body finishes loading.
          // No need for $(document).ready() here.
        </script>
      </body>
    </html>
Herr. enock
quelle