Pace.js Seite lädt Fortschrittsbalken Plug-in_Javascript-Kenntnisse-js-Tutorial-php.cn

Pace.js Seite lädt Fortschrittsbalken Plug-in_Javascript-Kenntnisse

WBOY

Freigeben： 2016-05-16 15:37:38

Original

1330 Leute haben es durchsucht

In diesem Artikel wird das Plugin „pace.js“ kurz vorgestellt.

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 gut kompatibel und mit allen gängigen Plug-ins über IE8 kompatibel. Darüber hinaus können Sie den Designstil des Ladefortschrittsbalkens auswählen B. Einfachheit, Flash, MAC OS

Aufrufmethode:

Pace.js und Designdateien vorstellen:

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

Nach dem Login kopieren

Benutzerdefinierte Konfiguration:

Pace.js wird automatisch in die Seite geladen. Es muss nicht an einen Code gebunden werden und erkennt den Fortschritt automatisch. Wenn Sie einige Anpassungen vornehmen möchten, können Sie window.paceOptions festlegen, um die Konfiguration anzupassen:

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

Nach dem Login kopieren

Sie können auch benutzerdefinierte Einstellungen in Skript-Tags einfügen, zum Beispiel:

<script data-pace-options='{ "ajax": false }' src='pace.js'></script>

Nach dem Login kopieren

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

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

Nach dem Login kopieren

API verwenden:

Pace.js öffentliche API-Liste:

Pace.start: Anzeige des Fortschrittsbalkens starten. Wenn Sie AMD oder Browserify nicht 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.

Im Grunde sind dies die allgemeinen Verwendungsmethoden, und es gibt noch andere Methoden. Bitte besuchen Sie die offizielle Website, um eine detailliertere Einführung anzuzeigen. Ich hoffe, dieses Plug-in kann allen helfen!