jQuery Preloader - Beispiel und Tutorial - Seite neu laden

Bitte guckt Euch ein Beispiel für diesen Preloader (Vorladen / preload der Seite) auf dieser Parallax Seite von mir an. Hier noch ein weiterer Preloader.

Manchmal kann es Sinn machen eine Seite mit vielen oder etwas größeren Bildern zunächst vorzuladen, damit die Seite dann erst vollständig geladen angezeigt wird. Dieses Skript funktioniert nicht in alten Browser wie z.B. dem IE8 (aber den benutzt ja hoffentlich kaum noch jemand).

Die Skripte für diesen Preloader baut Ihr wie folgt ein.

Ladet Euch zunächst die jQuery Datei herunter. Klickt dazu mit der rechten Maustaste auf den Link unten und wählt “Ziel speichern unter”:

Kopiert diese jQuery-Datei in das Verzeichnis “Assets” Eures Projektes und lest diese Datei im Fenster Layout-Eigenschaften ein. Dazu klickt Ihr auf den mittleren Button “Reihenfolge beim Skriptimport” und im Anschluss auf den “+” Button unten links. Wählt dann die Datei aus Eurem Verzeichnis “Assets”.

Skriptimport

Entscheidet nun, ob das Skript “Site-übergreifend” wie hier (alle Seiten) oder nur “Seitenspezifisch” (eine Seite) angewendet werden soll.

Skript-Einstellungen

Nun müsst Ihr den Aufruf mittels der unten stehenden Funktion noch in die HTML des Layouts (einzelne Seite) oder Master-Rahmens (alle Seiten) kopieren.

> Layout (oder Master-Rahmen) markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Ende des Haupttextes” einfügen

<!-- jQuery Preloader Aufruf -->
  <script type="text/javascript">
        window.addEventListener('DOMContentLoaded', function() {
            new QueryLoader2(document.querySelector("body"), {
                barColor: "#efefef",
                backgroundColor: "#34495E",
                percentage: true,
                barHeight: 1,
                minimumTime: 400,
                fadeOutTime: 1000
            });
        });
  </script>

Seiten-HTML

Ich habe hier die Hintergrundfarbe sowie minimale Zeit der Anzeige in Millisekunden der Animation nach meinen Bedürfnissen eingestellt.

Guckt Euch die möglichen Optionen unten auf der Seite von Gaya Design an.

Viel Spaß!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik