Maison > Article > interface Web > page Pace.js chargement de la barre de progression compétences en plug-in_javascript

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

WBOYoriginal: 2016-05-16 15:37:381302parcourir

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>

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
}

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>

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
 });
});

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 !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：La page Web transmet la valeur du bouton radio de la page contextuelle aux compétences Sharing_Javascript du code de la page parent.Article suivant：La page Web transmet la valeur du bouton radio de la page contextuelle aux compétences Sharing_Javascript du code de la page parent.

Articles Liés

Voir plus