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 ...
Vielen Dank im Voraus für Ihre Weisheit!
Antworten:
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 ... *.
<noscript>Tags zu verwenden, um den display:noneEffekt "rückgängig zu machen" .
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).
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.
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:
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.
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.
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.
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:
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 .
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.
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.
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.
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
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!
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.
Ich weiß, dass dies ein alter Thread ist, aber immer noch. Eine weitere einfache Option ist diese Bibliothek: http://gayadesign.com/scripts/queryLoader2/
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.
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>