Heim > Artikel > Web-Frontend > So verwenden Sie das Ladefortschritts-Plug-in mit Pace.js und NProgress.js (ausführliches Tutorial)

So verwenden Sie das Ladefortschritts-Plug-in mit Pace.js und NProgress.js (ausführliches Tutorial)

亚连Original: 2018-06-08 17:24:051971Durchsuche

Bei diesen beiden Plug-ins geht es um Ladefortschrittsanimationen. Heute werde ich Ihnen eine kurze Zusammenfassung der beiden Ladefortschritts-Plugins, Pace.js und NProgress.js, geben >

Beiden Plug-ins geht es um Ladefortschrittsanimationen. Zumindest für mich hat jedes seine eigenen Vorteile. Heute habe ich an der Ladefortschrittsanimation herumgebastelt und viele (nur diese beiden) Ladefortschrittsanimationen studiert. Ich glaube, ich habe ein vorläufiges Verständnis der Ladefortschrittsanimation.

NProgress.js

NProgress basiert auf jquery und die Version muss >1.8 sein

API:

　　NProgress.start() – Starten Sie die Fortschrittsbalken

NProgress.set(0.4) – Setzt den Fortschritt auf einen bestimmten Prozentsatz
NProgress.inc() – Erhöhen Sie den Fortschritt um einen kleinen Betrag
NProgress.done() – Markieren Sie den Fortschrittsbalken als abgeschlossen

Einführung:

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

Verwendung:

<script>
$(function() {
 　　NProgress.start();
 　　$(window).load(function() {
 　　NProgress.done();
 });
</script>

Benutzerdefinierter Animationsstil:

Schreiben Sie den von uns definierten Stil in ein Skript-Tag. Dies ist ein kleiner Trick.

<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>

Das ist das 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;
 }

JS-Code sieht so aus:

<script type="text/javascript">
 $(function(){
  NProgress.configure({
  template: $(&#39;#myId&#39;).html() // template是用来设置动画样式的属性
  });
  NProgress.start();
 });
 $(window).load(function(){
  NProgress.done();
 })
 </script>

Zusammenfassung: Steuern Sie, wann die Animation in js beginnt und wann sie endet, und sie wurde geladen . Animationsstil.

Die beiden wichtigsten Hinweise im benutzerdefinierten Stil sind die Rollenattribute:

role=bar: horizontale Ladeleiste

role=spinner rotierender kleiner Kreis

Beispiel 2: (CSS weggelassen)

<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: Anzeige des Fortschrittsbalkens starten, wenn Sie AMD nicht verwenden Wenn Browserify zum Laden des Moduls verwendet wird, wird dieses 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.

Verwendung:

<head>
 <script src="/pace/pace.js"></script>
 <link href="/pace/themes/pace-theme-barber-shop.css" rel="external nofollow" rel="stylesheet" /> <br>　　<!-- 此处的css样式就决定了加载进度动画的样式 -->
</head>

Animationsstil ändern:

Viele Arten von Ladefortschrittsanimationen wurden in Pace entworfen, Sie müssen nur die CSS-Datei ändern

Zusammenfassung:

Der Vorteil von Pace besteht darin, dass Sie keinen Code selbst schreiben müssen Es gibt nur einen Nachteil: Die auf der offiziellen Website bereitgestellte Ladefortschrittsanimation verfügt nicht über eine Maskenebene.

Natürlich können Sie es selbst einrichten (ich weiß nicht wie);

Das Obige habe ich für Sie zusammengestellt, ich hoffe, es wird Ihnen in Zukunft hilfreich sein .

Verwandte Artikel:

Wie man Ajax verwendet, um eine Seite in vue.js zu rendern

Ajax-Anfrage + vue.js-Rendering + Laden der Seite

So lösen Sie das Problem des Seitenflashs, wenn Vue.js Daten anzeigt

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Ladefortschritts-Plug-in mit Pace.js und NProgress.js (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Die Vue-Komponente ermöglicht ein unendliches MehrfachauswahlmenüNächster Artikel：Die Vue-Komponente ermöglicht ein unendliches Mehrfachauswahlmenü

In Verbindung stehende Artikel

Mehr sehen