Heim > Artikel > Web-Frontend > Pace.js – Fortschrittsbalken-Plug-in zum automatischen Laden von Webseiten

Pace.js – Fortschrittsbalken-Plug-in zum automatischen Laden von Webseiten

高洛峰Original: 2016-12-16 16:45:151277Durchsuche

Fügen Sie Pace.js in die Seite ein und die Seite überwacht automatisch Ihre Anfragen (einschließlich Ajax-Anfragen). Wenn die Ereignisschleife verzögert wird, werden der Ladestatus und der Fortschritt auf der Seite aufgezeichnet. Dieses Plug-In ist sehr gut kompatibel und mit allen Mainstream-Plug-Ins über IE8 kompatibel. Darüber hinaus können Sie den Designstil des Ladefortschrittsbalkens einführen. Sie können eine beliebige Farbe und mehrere Animationseffekte auswählen. (z. B. Einfachheit, Flash, MAC OSX, linker Abstand, oberer Abstand, Counter und Bounce usw. Animationseffekte). Wenn Sie gut darin sind, CSS-Animationen zu ändern, können Sie unbegrenzte Animationsmöglichkeiten erstellen, um Ihrer Website personalisierte Funktionen hinzuzufügen!

So verwenden Sie

Pace.js und Designdateien vorstellen:

<head>
  <script src="/pace/pace.js"></script>
  <link href="/pace/themes/pace-theme-barber-shop.css" rel="external nofollow"  rel="stylesheet" />
</head>

Benutzerdefinierte Konfiguration

Pace.js wird automatisch auf die Seite geladen Es besteht keine Notwendigkeit, sich an einen Code anzuschließen, und der Fortschritt wird automatisch erkannt. Wenn Sie einige Anpassungen vornehmen möchten, können Sie window.paceOptions festlegen, um die Konfiguration anzupassen:

  paceOptions = {
  // Disable the &#39;elements&#39; source
  elements: false,
  
  // Only show the progress on regular and ajax-y page navigation,
  // not every request
  restartOnRequestAfter: false
  }

Sie können die benutzerdefinierten Einstellungen auch in das Skript-Tag einfügen, zum Beispiel:

<script data-pace-options=&#39;{ "ajax": false }&#39; src=&#39;pace.js&#39;></script>

Wenn Sie AMD oder Browserify zum Laden von Modulen verwenden, können Sie es wie folgt einstellen (zum Beispiel: Start):

define([&#39;pace&#39;], function(pace){
  pace.start({
    document: false
  });
});

Verwenden der API

Pace.js öffentliche API-Liste:

Pace.start: Anzeige des Fortschrittsbalkens starten Wenn Sie nicht AMD oder Browserify zum Laden des Moduls verwenden, wird dies standardmäßig ausgeführt.

Pace.restart: Der Fortschrittsbalken wird neu geladen und angezeigt.

Pace.stop: Fortschrittsbalken ausblenden und Laden stoppen.

Pace.track: Überwachen Sie eine oder mehrere Anforderungsaufgaben.

Pace.ignore: Eine oder mehrere Anforderungsaufgaben ignorieren.

Weitere Artikel zum Thema „pace.js – Fortschrittsbalken-Plug-in zum automatischen Laden von Webseiten“ finden Sie auf der chinesischen PHP-Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Implementierung der js-FortschrittsbalkensteuerungNächster Artikel：Implementierung der js-Fortschrittsbalkensteuerung

In Verbindung stehende Artikel

Mehr sehen