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