Maison > Article > interface Web > Comment utiliser le plug-in de progression du chargement avec pace.js et NProgress.js (tutoriel détaillé)
Ces deux plug-ins concernent le chargement des animations de progression. Aujourd'hui, je vais partager avec vous un bref résumé des deux plug-ins de progression de chargement, pace.js et NProgress.js. Les amis intéressés devraient y jeter un œil
Les deux plug-ins concernent le chargement d'animations de progression. Il faut dire que chacun a ses propres caractéristiques. Du moins pour moi, chacun a ses propres avantages. Aujourd'hui, j'ai bricolé l'animation de progression du chargement et étudié beaucoup (juste ces deux) animations de progression du chargement. Je pense avoir une compréhension préliminaire de l'animation de progression du chargement. NProgress.jsNProgress est basé sur jquery, et la version doit être >1.8API : NProgress.start() — Démarrez le barre de progression NProgress.set(0.4) — Définit la progression sur un pourcentage spécifique
NProgress.inc() — Augmente légèrement la progression
NProgress.done() — Marque la barre de progression comme terminée
<link rel="stylesheet" type="text/css" href="css/NProgress.css" rel="external nofollow" > <script src="js/NProgress.js" type="text/javascript"></script><br>//还有jquery要引入进来Utilisation :
<script> $(function() { NProgress.start(); $(window).load(function() { NProgress.done(); }); </script>Style d'animation personnalisé : Écrivez le style que nous avons défini dans une balise de script, qui est considéré comme juste un petit truc.
<script type="text" id="myId"><br> <p class="splash card"><br> <p class="lead" style="text-align:center">不要回来,马上走开...</p> <p class="progress"> <p class="mybar" role="bar"> </p> </p> </p><br></script>C'est du CSS
html,body,iframe{ margin: 0; padding: 0; } #nprogress{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: #f7f7f7; z-index: 999; } .spinner-icon{ display: none!important; } .splash { position:absolute; top:40%; left:0; right:0; margin: auto; } .splash img { display: block; margin-left: auto; margin-right: auto; height: 100px; width: 100px; } .card { background-color: #f7f7f7; padding: 20px 25px 15px; margin: 0 auto 25px; width: 380px; } .mybar { background: #29d; height:10px; } .progress { height: 10px; overflow: hidden; }Le code js devient comme ceci :
<script type="text/javascript"> $(function(){ NProgress.configure({ template: $('#myId').html() // template是用来设置动画样式的属性 }); NProgress.start(); }); $(window).load(function(){ NProgress.done(); }) </script>Résumé : Contrôler quand l'animation démarre et quand dans js est terminé, l'animation le style a été chargé. Les deux pointeurs clés du style personnalisé sont les attributs de rôle : role=bar : barre de chargement horizontale role=spinner tournant un petit cercle Exemple 2 : (css omis)
<script type="text" id="myId"> <em id="__mceDel"><em id="__mceDel"><p class="bar" role="bar" style="display=block"><br> <p class="peg"></p><br> </p><br> <p class="spinner" role="spinner"><br> <p class="spinner-icon"></p><br> </p></em></em> </script>pace.js : API : Pace.start : Commencez à afficher la barre de progression, si vous ne l'êtes pas. Si vous utilisez AMD ou Browserify pour charger le module, celui-ci sera exécuté 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.
<head> <script src="/pace/pace.js"></script> <link href="/pace/themes/pace-theme-barber-shop.css" rel="external nofollow" rel="stylesheet" /> <br> <!-- 此处的css样式就决定了加载进度动画的样式 --> </head>Changer le style d'animation : De nombreux types d'animations de progression du chargement ont été conçus au rythme, il vous suffit de modifier le fichier CSS
Résumé :
L'avantage de Pace est que vous pouvez importer directement le fichier. Vous n'avez pas besoin d'écrire de code vous-même, et cela vient. avec une animation de progression du chargement. Il n'y a qu'un seul inconvénient. L'animation de progression du chargement fournie par le site officiel n'a pas de calque de masque. Bien sûr, vous pouvez le configurer vous-même (je ne sais pas comment) Ce qui précède est ce que j'ai compilé pour vous, j'espère que cela vous sera utile à l'avenir ; . Articles associés :Comment utiliser ajax pour afficher une page dans vue.js
Demande ajax + rendu vue.js + chargement de la page
Comment résoudre le problème de clignotement de la page lorsque Vue.js affiche des données
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!