jQuery NProgress.js加載進度插件的簡單使用方法
更新時間：2018年01月31日 08:41:42 作者：水車
NProgress是基于jquery的，且版本要 >1.8
。這篇文章主要介紹了NProgress.js加載進度插件的簡單使用方法,需要的朋友可以參考下
NProgress.js
說明:
NProgress是基于jquery的，且版本要 >1.8
下載地址:
https://github.com/rstacruz/nprogress
API:
NProgress.start() — 啟動進度條 NProgress.set(0.4) — 將進度設置到具體的百分比位置 NProgress.inc() — 少量增加進度 NProgress.done() — 將進度條標為完成狀態(tài)
使用步驟:
1. 引入
<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. 使用場景一:頁面加載的效果 開始頁面加載開始進度條 頁面加載好 結(jié)束進度條:
<em id="__mceDel"><script>
$(function() {
NProgress.start();
$(window).load(function() {
NProgress.done();
});
</script>
</em>
3.使用場景二:ajax發(fā)送的效果 開始發(fā)送開始進度條 成功后 結(jié)束進度條:
<script>
$(window).ajaxStart(function () {
NProgress.start();
});
$(window).ajaxStop(function () {
NProgress.done();
});
</script>
//技巧總結(jié) 此方法掛在window上 是為了監(jiān)聽項目中所有的ajax請求
//ajax事件 可參考 jquery 文檔 http://jquery.cuishifeng.cn/
總結(jié)
以上所述是小編給大家介紹的jQuery NProgress.js加載進度插件的簡單使用方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
這篇文章主要介紹了JavaScript 值類型和引用類型的初次研究,需要的朋友可以參考下2017-07-07
js通過var定義全局變量與在window對象上直接定義屬性的區(qū)別說明
這篇文章主要介紹了js通過var定義全局變量與在window對象上直接定義屬性的區(qū)別說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了fullpage.js全屏滾動插件使用,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
window.name 的美妙之處：name 值在不同的頁面（甚至不同域名）加載后依舊存在，并且可以支持非常長的 name 值（2MB）。2008-09-09
在使用JavaScript對數(shù)組進行操作的時候，我們經(jīng)常需要將數(shù)組進行備份，事實證明如果只是簡單的將它賦予其他變量，那么我們只要更改其中的任何一個，然后其他的也會跟著改變，這就導致了問題的發(fā)生。2014-04-04
HTML5canvas 繪制一個圓環(huán)形的進度表示實例
這篇文章主要介紹了HTML5canvas繪制一個圓環(huán)形的進度表示實例的相關資料,需要的朋友可以參考下2016-12-12
javascript當中的代碼嗅探擴展原生對象和原型(prototype)
如果不是有特殊需要而去擴展原生對象和原型（prototype）的做法是不好的,除非這樣做是值得的，例如，向一些舊的瀏覽器中添加一些ECMAScript5中的方法2013-01-01
這篇文章主要介紹了微信分享invalid signature簽名錯誤踩過的坑,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
JS動畫實現(xiàn)回調(diào)地獄promise的實例代碼詳解
這篇文章主要介紹了JS動畫實現(xiàn)回調(diào)地獄promise的實例代碼詳解,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了javascript彈出層輸入框(示例代碼)。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12