Viele Programmierer optimieren JavaScript und CSS, um das Laden der Seite zu beschleunigen.
Aber nicht alle von ihnen stellen Preloader her, die dem Benutzer den Effekt subjektiv schnellerer Downloads verleihen.
Methodennummer 1. Billig und fröhlich.
Die Idee ist einfach: Sie müssen das Bild zentrieren, um dem Benutzer anzuzeigen, dass die Seite noch geladen wird. Der Code ist ziemlich einfach, schreiben Sie gleich danach
- < div id ="preloaderbg" class ="centerbg1" >
- < div class ="centerbg2" >
- < div id ="preloader" >
- < script type ="text/javascript" >
- document .getElementById ("pretoaderbg") .style.display \u003d "block";
* Dieser Quellcode wurde mit dem Quellcode-Textmarker hervorgehoben.
- .centerbg1 (
- anzeige: keine;
- breite: 100%;
- höhe: 100%;
- position: absolut;
- oben: 0px;
- links: 0px;
- z-Index: 1000;
- hintergrund: URL ("/ design / im / texture1.jpg") # 3c363e;
- .centerbg2 (
- position: absolut;
- links: 50%;
- oben: 50%;
- #preloader (
- oben: -50%;
- links: -50%;
- position: relativ;
- breite: 333px;
- höhe: 26px;
- hintergrund: url ();
- rand: fest # edda3d 2px;
Infolgedessen wird unmittelbar nach dem Laden ein Block mit einem animierten Fortschrittsbalken in der Mitte der Seite angezeigt. Der Überlaufparameter muss geändert werden, damit die Bildlaufleiste nicht angezeigt wird und der Benutzer nicht nach unten scrollen und den Inhalt der Seite anzeigen kann.
Wenn alles geladen ist, müssen Sie den Preloader entfernen und den Überlauf auf sichtbar setzen.
* Dieser Quellcode wurde mit dem Quellcode-Textmarker hervorgehoben.
- document .body.style.overflow \u003d "sichtbar";
Ich habe diesen Teil des Codes in eine Datei mit JS-Funktionen, plreloader1.js, eingefügt
Wenn Sie aus einem animierten GIF-Bild einen Fortschrittsbalken erstellen, kann sich herausstellen, dass dieser zu schwer ist, manchmal sogar mehr als die Seite selbst, auf der er platziert ist.
Daher ist es besser, einen Streifen (z. B. einen) zu zeichnen, ihn mit dem ID-Preloader als Hintergrund des Blocks zu setzen und die Hintergrundposition mit dem Timer zu verschieben.
* Dieser Quellcode wurde mit dem Quellcode-Textmarker hervorgehoben.
Und nach dem Laden machen wir das:
* Dieser Quellcode wurde mit dem Quellcode-Textmarker hervorgehoben.
- clearInterval (pbPos);
- document .getElementById ("loaderbg") .style.display \u003d "none";
Das Ergebnis der Arbeit ist zu sehen.
Diese Methode hat Nachteile - Wenn Sie den Preloader auf Onload verstecken, d. H. Wenn Sie warten, bis alle Bilder geladen sind, könnte der Benutzer denken, dass die Seite gerade hängen geblieben ist - tatsächlich passiert nichts außer der Animation. Wenn Sie in jQuery an $ (document) .ready () hängen, werden die Bilder nach dem Verschwinden des Preloaders nur geladen.
Daher wird vorgeschlagen, ...
Methode Nummer 2. Die Wahrheit ist irgendwo in der Nähe, oder die Jedi schlagen zurück.
Zunächst zeichnen wir 2 Ladebänder - aktiv und nicht sehr.
Stellen Sie es als Hintergrund inaktiv und als Hintergrund für die Diva ein, für die wir die Breite abhängig vom Prozentsatz der Last ändern.
* Dieser Quellcode wurde mit dem Quellcode-Textmarker hervorgehoben.
- < div id ="loaderbg" class ="centerbg1" >
- < div class ="centerbg2" >
- < div id ="preloader" >
- < img src ="/design/im/progbar_ph.gif" />
- < div id ="progbarfg" >
Progbar_ph.gif ist ein 1 Pixel hohes Bild und die Breite unserer Bildlaufleiste (dieses Beispiel ist ohne IE fehlerhaft, und ich habe noch keinen anderen Weg gefunden, die Divs mit dem Fortschrittsbalken zu zentrieren).
Die Stile sind die gleichen wie in der vorherigen Methode, außer dass
#progbarfg (Breite: 0px; Hintergrund: URL (‘/ design / im / progbar_fg.png’))
Jetzt muss noch ein kleines Skript erstellt werden, das den Inhalt der Website und der Bilder dynamisch lädt. Es wird benötigt, damit der Fortschrittsbalken angezeigt und geändert wird, noch bevor das verwendete Framework und andere JS-Dateien heruntergeladen werden.
Nehmen Sie eine durchschnittliche Site, die vollständig auf AJAX erstellt wurde. Das Herunterladen erfolgt ungefähr wie folgt:
- hTML-Code wird geladen
- bilder werden geladen
- dann eine Art Rahmen
- zusätzliche JS-Dateien (obwohl es besser ist, alles in eine zu kleben)
- eine bestimmte Funktion (oder mehrere) wird gestartet, die zusätzlichen Inhalt zusammenfasst.
Ich habe 2 Methoden implementiert - die erste ist einfach, sie schaltet sich wie folgt ein:
kurz zuvor schreibe:
< script type ="text/javascript" >
dLoader.start ("progbarfg", 333, "count");
Der erste Parameter ist die Kennung des Blocks mit der aktiven Ladeleiste als Hintergrund, der zweite ist die Breite des Bildes, der dritte Parameter ist die Methode, mit der wir das Gewicht des Inhalts berücksichtigen.
Das Skript scannt alle Bilder auf den Seiten und weist ihnen eine Gewichtung von 1 zu. Alle JS-Dateien werden in seinem Hauptteil registriert, wie ich weiter unten erläutern werde.
Ich möchte jedoch, dass das Gewicht jeder Inhaltseinheit keine Einheit ist, sondern ein reales Volumen in Bytes. Und für AJAX-Anwendungen möchte ich sofort den gesamten Zeitplan laden.
Zu diesem Zweck habe ich ein Skript in PHP geschrieben, das den Ordner mit Designbildern durchsucht und all dies mit Dateigrößen in ein Array einfügt und optional komprimiert.
Also vorher fertigstellen Als nächstes erhalten wir einen Fortschrittsbalken, der den Fortschritt des Ladens des gesamten Inhalts auf der Seite anzeigt. Danach verschwindet er allmählich.
* Dieser Quellcode wurde mit dem Quellcode-Textmarker hervorgehoben.
Wenn alle JS-Dateien geladen wurden, werden die Funktionen im Aufrufarray gestartet. Wenn wir Inhalte mit jQuery laden, sieht die Funktion folgendermaßen aus:
* Dieser Quellcode wurde mit dem Quellcode-Textmarker hervorgehoben.
- funktion fn (callBack) (
- $ .get ("/", params, function (data) (someHandler (data); eval (callBack);));
Das PHP-Skript führt Folgendes aus: Es fügt die erforderlichen Skripte mit ihren Größen sowie Bilder und zusätzliche Funktionen in das Array ein. Code:
* Dieser Quellcode wurde mit dem Quellcode-Textmarker hervorgehoben.
- $data ["js"] \u003d array (
- array ("Pfad" \u003d\u003e "jquery-1.2.6.min.js", "Größe" \u003d\u003e Dateigröße ($ jsRoot. "/ jquery-1.2.6.min.js")),
- array ("Pfad" \u003d\u003e "functions.js", "Größe" \u003d\u003e Dateigröße ($ jsRoot. "/ functions.js"))
- $ data ["im"] \u003d GetFiles ($ imgRoot, true);
- $ data ["invoke"] \u003d array (
- "action" \u003d\u003e "loadTemplates",
- "size" \u003d\u003e GetDirSize (dirname (__ FILE __). "/ design / ajax templates /", false)
- $ data ["jspath"] \u003d "/ design / js /";
- $ data ["impath"] \u003d "/ design / im";
Nachdem alle Bilder und JS-Dateien geladen wurden, wird das Ereignis onLoad ausgelöst, das Sie in der Funktion dLoader.start () angegeben haben
Es gibt noch eine Möglichkeit, den Startvorgang anzupassen.
Eine Lektion, in der wir den Prozess des Erstellens eines Preloaders für eine Seite (Preload-Seite) betrachten. Als Preloader verwenden wir das Font Awesome-Symbol oder ein animiertes GIF-Bild, das beim Laden der Seite angezeigt wird.
So erstellen Sie einen Preloader für eine Site
Die Seite einer Website wird beim Öffnen nicht sofort geladen. Das Laden und Anzeigen der Seite dauert einige Zeit. Dies kann zwischen 1 und mehreren Sekunden liegen. Damit dieser Prozess (d. H. Der Prozess des Ladens der Seite) für den Benutzer irgendwie geglättet wird, kann ihm für diese Zeit ein animiertes Bild oder Symbol angezeigt werden.
Das Erstellen eines Preloaders ist recht einfach und besteht darin, dass unmittelbar nach dem Öffnen der Site-Seite ein Block (# vor dem Laden) mit einem animierten Bild oder Symbol angezeigt werden muss. Und nachdem das Laden der Seite abgeschlossen ist, muss dieser Block (# vor dem Laden) mit dem animierten GIF oder Symbol für den Benutzer ausgeblendet werden.
Erstellen eines Preloaders für eine Seite
Wir werden in 3 Schritten einen Preloader entwickeln, der wie ein weißer Hintergrund mit einem animierten Symbol aussieht:
1. Erstellen Sie einen HTML-Code, der aus einem Block und einem Font Awesome-Symbol besteht. Dieser Code muss in das Dokument eingefügt werden, damit er dem Benutzer zuerst angezeigt wird, d. H. unmittelbar nach dem öffnenden Body-Tag:
2. Erstellen Sie CSS-Stile für den div-Block und das i-Element (Symbole).
# vor dem Laden (Position: fest; / * feste Blockposition * / links: 0; / * Elementposition links * / oben: 0; / * Elementposition oben * / rechts: 0; / * Elementposition rechts * / unten : 0; / * untere Position des Elements * / background: #fff; / * Blockhintergrundfarbe * / z-index: 1001; / * platziere es über allen Elementen auf der Seite * /) # vor dem Laden i (Schriftgröße) : 70px; / * Symbolgröße * / Position: absolut; / * absolute Position, positioniert relativ zu seinem nächsten Vorfahren * / links: 50%; / * links 50% der Breite des übergeordneten Blocks * / oben: 50%; / * oben 50 % der Höhe des übergeordneten Blocks * / margin: -35px 0 0 -35px; / * Symbolversatz, damit und zentriert * /) 3. das Skript hinzufügen nach preloder versteckt (das heißt, wenn die Seite zu laden Laden wird im Objektfenster auftreten):
Wenn Sie ein animiertes GIF-Bild als Preloader-Indikator verwenden möchten, müssen Sie in den obigen Schritten die folgenden Änderungen vornehmen:
Entfernen Sie die Font Awesome-Klassen im HTML-Code:
Nehmen Sie in CSS-Stilen die folgenden Änderungen vor (ändern Sie die Regel # vor dem Laden von i (..)):
# vor dem Laden i (Breite: 70px; / * Breite des GIF-Bildes * / Höhe: 70px; / * Höhe des GIF-Bildes * / Position: absolut; links: 50%; oben: 50%; Hintergrund: URL ("Assets" /images/img.gif ") keine Wiederholung 50% 50%; / * Position (URL) des GIF-Bildes und anderer Parameter * / margin: -35px 0 0 -35px;)
Sie können animierte GIF-Bilder für Ihre Website von der Ressource http://preloaders.net/ herunterladen oder dieses Archiv verwenden.
Niemand wartet gerne lange auf das Laden einer Seite, eines Schiebereglers oder anderer Informationen. Wenn Sie jedoch die Wartezeit auf die Site nicht verkürzen können (z. B. ist sie interaktiv und alle Skripte müssen geladen werden, damit sie ordnungsgemäß funktioniert), müssen Sie versuchen, die Zeit zum Laden der Site zu verkürzen.
Verwenden Sie dazu animierte Preloader.
Wir haben für Sie 20 interessante Preloader ausgewählt, die mit CSS3 und HTML5 oder JQuery erstellt wurden. Sie können die Benutzererfahrung erheblich verbessern.
Sie können animierte Download-Indikatoren für Galerien, Schieberegler, Blogs und mehr verwenden.
Hier sind einfache und elegante CSS-Lader. Sie können leicht Teil eines Webprojekts werden - kopieren Sie einfach den Code und fügen Sie ihn ein.
Und dies ist ein saftiger Preloader in Form eines Regenbogens, der in CSS erstellt wurde. Geeignet für helle, dynamische Jugendprojekte!
Und diese Download-Anzeige eignet sich gut für Websites mit Kartendesign.
Dieser elegante Preloader erzielt einen magischen Effekt, indem er HTML und CSS kombiniert. Es sieht gut aus und kann wunderbar auf jeder Art von Website funktionieren.
Dynamische Animation - mehrfarbige Blöcke, die einen kleinen Ball in Bewegung setzen.
Dies ist ein großartiger Bootloader, der in das Logo, den Site-Namen oder den eingängigen Slogan integriert werden kann. Wird zu einem starken Markenelement für Ihre Website.
Dieser fantastische CSS-Loader eignet sich für verschiedene Projekte und Anwendungen. Einfach und elegant, und Sie können es mit zwei Klicks zur Site hinzufügen.
Nur zwei Farben und einfache Formen. Aber was für eine interessante Animation! Dieser Preloader wird jede Ihrer Websites dekorieren.
Dieser Preloader ist ideal für dynamische Projekte mit einem stilvollen, minimalistischen Design.
Wieder klassisch, wieder Würfel. Eine sehr interessante Animation macht diesen Download-Indikator jedoch zu einem Blickfang.
Und dieses Bild stammt aus der Kategorie "Ich kann meine Augen nicht abwenden". Es ist einfach faszinierend und garantiert die Wartezeit für Downloads für Ihre Benutzer.
Wenn Sie nach Download-Indikatoren wie bei Tumblr suchen, schauen Sie sich diese an! CSS-basierte Animation mit SVG-Symbolen.
Und dies sind kreisförmige interaktive CSS3-Preloader. Bewegen Sie den Mauszeiger über einzelne Abschnitte und sehen Sie sich einen interessanten Effekt an.
Einfache und elegante Animation in Pastellfarben. Ideal für Frauenseiten.
Und in diesem Kit können Sie die Animation des Downloads nach Ihrem Geschmack auswählen. Wird es eine Uhr oder nur weiße Kreise sein?
Einfacher Lader mit rechteckigen Formen, die sich drehen. Einfach auf jeder Website zu implementieren.
Und hier ist eine ganze Sammlung animierter Downloader. Es gibt eine große Auswahl und alles lässt sich problemlos in jede Site integrieren.
Ein interessanter Preloader mit Kreisen. Sie sind entweder in ein Dreieck oder in eine gestrichelte Linie angeordnet.
Eine weitere Sammlung von Indikatoren mit verschiedenen Animationen. Alle Vorlader haben die Form eines Kreises.
Diese Animation kann einem Textlogo oder einem beliebigen Text überlagert werden - beispielsweise dem Namen des Unternehmens oder seinem Slogan.
Wir hoffen, dass Ihnen etwas aus dieser Sammlung bei Ihrer Arbeit am nächsten Projekt nützlich sein wird!
Abhängig von der Art der Webressource und der Menge der darin enthaltenen Informationen kann das Laden einer Site einige Millisekunden bis einige Sekunden dauern. Während des Download-Vorgangs kann auf der Site eine Menge passieren: Das Layout kann in verschiedene Richtungen springen, der Text kann den Stil ändern. Es ist völlig logisch, all diese Bacchanalien vor den Augen der Besucher zu verbergen. Hierfür sind Vorlader ausgelegt.
Der Preloader ist ein Indikator für das Laden der Site. Es kann sowohl in Form eines animierten GIF-Bildes als auch in Form einer Ladeskala erstellt werden. Unabhängig vom Erscheinungsbild des Preloaders ist das Funktionsprinzip jedoch dasselbe: So bald wie möglich, um dem Benutzer eine Download-Anzeige anzuzeigen, und diese Anzeige am Ende des Downloads auszublenden.
Wie eine Webseite geladen wird
Bevor Sie einen Indikator für einen Prozess erstellen, müssen Sie den Prozess selbst verstehen. Das Laden von Webseiten ist keine Ausnahme. Wie wird die Webseite geladen?
- Der Browser sendet eine Anfrage an den Server.
- Der Server sendet den HTML-Code der Seite an den Browser. Die Besonderheit der Datenübertragung im Internet ist so, dass der Browser den Seitencode nicht sofort, sondern teilweise erhält.
- Um Zeit zu sparen, beginnt der Browser mit der Verarbeitung des HTML-Codes der Seite, ohne auf das Ende des Dokuments zu warten.
- Sobald der Browser auf eine externe Ressource im Seitencode stößt, sendet er eine Anfrage an den Server, um diese Ressource zu empfangen. Wenn es sich bei dieser Ressource um eine Javascript-Datei handelt, wird in den meisten Fällen die weitere Verarbeitung der Seite beendet, bis der Javascript-Code dieser Datei vollständig geladen und ausgeführt ist.
- Sobald der Browser den HTML-Code der Seite vollständig empfangen und verarbeitet hat (der Handler hat das Schließen des HTML-Tags erreicht), löst der Browser das Ereignis DOMContentLoaded aus, das auch als DOM Ready bezeichnet wird.
- Sobald die letzte externe Ressource geladen ist, löst der Browser das Ereignis window.onload aus. Die Seite ist vollständig geladen.
Erstellungsprozess
Nachdem Sie die Ladereihenfolge der Webseite verstanden haben, können Sie selbst eine Liste mit Aufgaben und Bedingungen für unseren Preloader erstellen. Meine Bedingungen für ihn sind wie folgt:
- Es sollte so früh wie möglich angezeigt werden und den gesamten Inhalt abdecken.
- Wann immer möglich, sollte das Mapping nicht von externen Ressourcen abhängig sein.
- Muss ausgeblendet werden, sobald das Laden der Seite abgeschlossen ist. Sie können jede verfügbare Javascript-Bibliothek verwenden, um sie auszublenden.
Wenn Ihre Seite fast unabhängig von Grafiken ist, können Sie anstelle von window.onload DOM Ready verwenden, um den Preloader auszublenden.
Um das erste Problem zu lösen, geben Sie den folgenden HTML-Code unmittelbar nach dem öffnenden Body-Tag ein:
Für unseren Preloader benötigen wir Stile, möchten jedoch nicht von externen Dateien abhängig sein. Daher platzieren wir die Stile direkt im Dokument, irgendwo im Kopf:
# Seitenvorlader (Position: fest; links: 0; oben: 0; rechts: 0; unten: 0; Hintergrund: # 000; Z-Index: 100500;) # Seitenvorlader .spinner (Breite: 32px; Höhe: 32px; Position: absolut; links: 50%; oben: 50%; Hintergrund: URL ("/ images / spinner.gif") keine Wiederholung 50% 50%; Rand: -16px 0 0 -16px;)
Leider kann ich externe Ressourcen nicht vollständig aufgeben, da wir ein animiertes GIF-Bild benötigen. Angesichts der geringen Größe des Bildes selbst ist dies jedoch ein akzeptables Opfer.
Jetzt bleibt nur noch unser Preloader nach dem Laden der Seite auszublenden. Hier sind wir nicht mehr auf Mittel beschränkt, sodass wir jQuery verwenden können:
$ (Fenster) .on ("Laden", Funktion () (var $ Preloader \u003d $ ("# Seiten-Preloader"), $ spinner \u003d $ Preloader.find (". Spinner"); $ spinner.fadeOut (); $ prestoader.delay (350) .fadeOut ("langsam");));
Fertig! Anstatt jetzt in verschiedene Richtungen zu springen, sieht der Besucher beim Laden der Seite unseren ordentlichen Ladebildschirm. Eine funktionierende Version eines solchen Preloaders ist auf der Website zu sehen
