Wenn bestimmte Seiten Ihrer Website einige Zeit zum Laden benötigen, sollten Sie einen Seitenlader in Betracht ziehen. Ein Seitenlader ist jede Art von Animation, die einem Besucher visuell mitteilt, dass die Seite geladen wird und er kurz warten soll. Ohne einen Seitenlader könnte ein Besucher denken, Ihre Website reagiere nicht, und frustriert wegklicken. Ein Seitenlader bietet auch eine kleine Ablenkung, die die Wartezeit tatsächlich kürzer erscheinen lässt.
Wenn Ihre Verzögerung beim Laden von Seiten durch etwas wie einen Datenbankabruf verursacht wird, bleibt der Besucher wahrscheinlich auf der aktuellen Seite, bis die Seite, zu der er gelangen möchte, geladen ist. Dies unterscheidet sich von einer Verzögerung beim Laden von Seiten wie großen Bildern, bei denen der Besucher die Seite vor den Verzögerungen erreicht. Es ist das erstgenannte Szenario, in dem ein CSS-Seitenlader sehr gut funktionieren kann. Hier ist, wie Sie es machen
- Erstellen Sie eine DIV mit Ihrem Seitenlader darin. Dies kann ein kleines animiertes GIF oder vielleicht eine SWF-Flash-Animation sein.
- Positionieren Sie diese DIV in Ihrem CSS genau dort, wo Sie sie benötigen. Sie kann über dem Hauptinhalt platziert werden, oder Sie können ein Vollbild-Aufhellung wie diese durchführen
div#page_loader { position: absolute; top: 0; bottom: 0%; left: 0; right: 0%; background-color: white; z-index: 99; } - Fügen Sie diese DIV zu jeder Seite Ihrer Website hinzu, die auf die Seite verlinkt, für die Sie einen Lader benötigen. Stellen Sie dann sicher, dass Sie display: none; zu Ihrem CSS für diese DIV hinzufügen. Dies bewirkt, dass sie unter normalen Umständen überhaupt nicht angezeigt wird.
- Ein Hauch von JavaScript ist erforderlich, um die Anzeigeeigenschaft dieser DIV umzuschalten. Dieses JavaScript wird in jedes verlinkte Element eingefügt, das auf die langsam ladende Seite verlinkt. Wie folgt
<a onclick="javascript:document.getElementById('page_loader').style.display='block';" href="slowpage.html">Slow Page</a>
Das Klicken auf diesen Link löst das JavaScript aus, um die Anzeige der DIV auf „block“ zu setzen und sie sofort anzuzeigen. Dies ist für den Besucher sichtbar, bis die langsam ladende Seite geladen ist, dann wird er dorthin weitergeleitet.
Update: Es gibt einen neuen Beitrag einschließlich eines Beispiels hier.
Vielleicht bin ich ein bisschen langweilig, aber was halten Sie davon
div#page_loader {
display: block;
…
}
Dann müssen Sie in Ihrem <head>-Tag Folgendes einfügen
<head onLoad=”function(){
document.getElementById(‘page_loader’).style.display=’none’;
}”>
Und Sie müssen keinen onclick-Event auf Seiten deklarieren, auf denen Sie Ihren Lader anzeigen möchten. Er wird dies automatisch tun.
Ich glaube, ich bin nur ein bisschen verwirrt…
Wie hilft es, die Anzeigetaste im Header zu platzieren? Das Tutorial geht davon aus, dass Sie den Seitenlader nicht auf jedem einzelnen Anker-Element platzieren möchten, sondern nur auf dem (oder mehreren), das ihn benötigt.
WOW.
Das ist interessant!
Hallo (wieder) Chris und danke für die Korrektur meiner vorherigen Antwort.
Ich habe wieder einen Fehler gemacht, anstatt JavaScript-Code in den "head"-Tag zu setzen, setzen Sie ihn in den "body"-Tag ;-)
Ich stimme Ihrer Idee zu, nur einen Lader auf langsamen Seiten anzuzeigen, aber woher weiß man, welche langsam sind? Ich denke, das hängt von zu vielen Faktoren ab, um es vorherzusagen.
Die von mir vorgeschlagene Lösung ist einfach und funktioniert mit allen Seiten. Wir könnten uns auch vorstellen, eine Art Timer einzustellen, und wenn die Seite innerhalb dieser Zeit nicht geladen ist, zeigen wir den Lader an.
Auf jeden Fall ist das ein toller Beitrag, verstehen Sie mich nicht falsch ;-)
Ja, Sie haben Recht, dass, wenn Sie nicht sagen können, welche Ihrer Seiten langsam laden, Ihr Weg der richtige ist.
Ich habe diesen Beitrag eigentlich wegen einer Website geschrieben, an der ich gearbeitet habe. Es war nur eine bestimmte Seite mit einem großen Datenbankabruf, die die langsame Seitenladung verursachte, und diese Lösung funktionierte perfekt dafür. Ihr Weg ist viel einfacher :)
ein bisschen verwirrt. Können Sie eine Demo machen, damit ich sie herunterladen kann. Vielen Dank
Ich kann kein herunterladbares Beispiel machen, da die Art der langsamen Seitenladung, über die ich spreche, von einer langsamen Datenbank oder einem großen Datenbankabruf herrührt. Ich kann keine Datenbank in einen Download aufnehmen. Vielleicht kann ich es irgendwie vortäuschen. Oder ich könnte versuchen, ein Beispielseite auf dieser Website zu veröffentlichen, aber ich zögere, das zu tun, da es die Leistung der Website ernsthaft beeinträchtigen könnte, wenn eine Reihe von Leuten sie nutzt. Bleiben Sie dran.
es funktioniert nicht bei mir oder ich habe etwas übersehen.
vielleicht brauche ich ein Beispiel.
@delang: Ich habe einen neuen Artikel dazu veröffentlicht, mit einem Link zu einer Beispielseite hier
danke Kumpel.