Comment utiliser le plug-in de progression de chargement NProgress.js dans jQuery

NProgress est basé sur jquery, et la version doit être >1.8 . Cet article présente principalement l'utilisation simple du plug-in de progression de chargement NProgress.js. Les amis qui en ont besoin peuvent se référer à

NProgress.js

. 🎜>

NProgress est basé sur jquery, et la version doit être >1.8

Adresse de téléchargement :

https://github.com/rstacruz/nprogress

API :

NProgress.start() — 启动进度条
　　　　NProgress.set(0.4) — 将进度设置到具体的百分比位置
　　　　NProgress.inc() — 少量增加进度
　　　　NProgress.done() — 将进度条标为完成状态

Étapes d'utilisation :

1. Présenter

<link rel="stylesheet" type="text/css" href="css/NProgress.css" rel="external nofollow" >
 <script src="js/NProgress.js" type="text/javascript"></script><br>//还有jquery要之前引入进来

2. Scénario d'utilisation 1 : Effet de chargement de page Démarrer le chargement de la page démarrer la barre de progression La page est chargée. Fin de la barre de progression :

<em id="__mceDel"><script>
$(function() {
 　　NProgress.start();
 　　$(window).load(function() {
   　　NProgress.done();
 });
</script>
</em>

3. Scénario d'utilisation 2 : L'effet de l'envoi ajax Commencez l'envoi de la barre de progression de démarrage :

.

<script>
$(window).ajaxStart(function () {
  NProgress.start();
});
$(window).ajaxStop(function () {
  NProgress.done();
});
</script>
//技巧总结  此方法挂在window上 是为了监听项目中所有的ajax请求
//ajax事件 可参考 jquery 文档 http://jquery.cuishifeng.cn/

Ce qui précède est ce que j'ai organisé. Pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Comment créer une salle de discussion multi-personnes dans l'environnement nodejs+express

Interprétation détaillée de vue-admin et post-traitement, séparation et combinaison du terminal (flacon)

Comment implémenter la navigation Panda TV à l'aide de jquery+css3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!