page Pace.js chargement de la barre de progression compétences en plug-in

page Pace.js chargement de la barre de progression compétences en plug-in_javascript

WBOY

Libérer： 2016-05-16 15:37:38

original

1384 Les gens l'ont consulté

Cet article présente brièvement le plugin pace.js.

Introduisez Pace.js dans la page, et la page surveillera automatiquement vos demandes (y compris les requêtes Ajax). Lorsque la boucle d'événement est en retard, l'état de chargement et la progression seront enregistrés sur la page. Ce plug-in a une bonne compatibilité et est compatible avec tous les plug-ins courants au-dessus d'IE8. De plus, sa puissance est que vous pouvez également introduire le style de thème de la barre de progression de chargement. Vous pouvez choisir n'importe quelle couleur et plusieurs effets d'animation (tels que). comme simplicité, flash, MAC OSX, remplissage gauche, remplissage supérieur, compteur et rebond, etc. effets d'animation), si vous êtes doué pour modifier les animations CSS, vous pouvez créer des possibilités illimitées d'animations pour ajouter des fonctionnalités personnalisées à votre site Web !

Méthode d'appel :

Présentez Pace.js et les fichiers de thème :

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

Copier après la connexion

Configuration personnalisée :

Pace.js sera automatiquement chargé dans la page. Il n'a pas besoin d'être accroché à un code et détectera automatiquement la progression. Si vous souhaitez effectuer quelques ajustements, vous pouvez définir window.paceOptions pour personnaliser la configuration :

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

Copier après la connexion

Vous pouvez également mettre des paramètres personnalisés dans les balises de script, par exemple :

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

Copier après la connexion

Si vous utilisez AMD ou Browserify pour charger des modules, vous pouvez le configurer comme ceci (par exemple : démarrer) :

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

Copier après la connexion

Utiliser l'API :

Liste des API publiques Pace.js :

Pace.start : Commencez à afficher la barre de progression Si vous n'utilisez pas AMD ou Browserify pour charger le module, celle-ci sera exécutée par défaut.

Pace.restart : La barre de progression est rechargée et affichée.

Pace.stop : masquez la barre de progression et arrêtez le chargement.

Pace.track : Surveillez une ou plusieurs tâches de requête.

Pace.ignore : Ignorer une ou plusieurs tâches de requête.

En gros, ce sont les méthodes d'utilisation générales, et il existe d'autres méthodes. Veuillez vous rendre sur le site officiel pour voir une introduction plus détaillée. J'espère que ce plug-in pourra aider tout le monde !