Heim > Web-Frontend > js-Tutorial > So verwenden Sie das Ladefortschritts-Plug-in NProgress.js in jQuery

So verwenden Sie das Ladefortschritts-Plug-in NProgress.js in jQuery

亚连
Freigeben: 2018-06-08 17:32:02
Original
1543 Leute haben es durchsucht

NProgress basiert auf jquery und die Version muss >1.8 sein . In diesem Artikel wird hauptsächlich die einfache Verwendung des Ladefortschritts-Plug-Ins NProgress.js vorgestellt 🎜>

NProgress basiert auf JQuery und die Version muss >1.8 sein

Download-Adresse:

https://github.com/rstacruz/nprogress

API:

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

Verwendungsschritte:

1. Einführung von

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

2. Verwendungsszenario 1: Seitenladeeffekt Seitenladen starten Fortschrittsbalkenseite starten geladen Endfortschrittsbalken:

<em id="__mceDel"><script>
$(function() {
   NProgress.start();
   $(window).load(function() {
     NProgress.done();
 });
</script>
</em>
Nach dem Login kopieren
3. Verwendungsszenario 2: Auswirkung des Ajax-Sendens Senden starten Startfortschrittsbalken Nach Erfolg Endfortschrittsbalken:
<script>
$(window).ajaxStart(function () {
  NProgress.start();
});
$(window).ajaxStop(function () {
  NProgress.done();
});
</script>
//技巧总结  此方法挂在window上 是为了监听项目中所有的ajax请求
//ajax事件 可参考 jquery 文档 http://jquery.cuishifeng.cn/
Nach dem Login kopieren

Das Obige habe ich für alle zusammengestellt, ich Ich hoffe, es wird in Zukunft nützlich sein. Jeder ist hilfreich.

Verwandte Artikel:

So erstellen Sie einen Mehrpersonen-Chatroom in der NodeJS+Express-Umgebung

Detaillierte Interpretation von vue-admin und Nachbearbeitung Terminal (Flasche) Trennung und Kombination

So implementieren Sie die Panda-TV-Navigation mit jquery+css3

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Ladefortschritts-Plug-in NProgress.js in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage