jQuery NProgress.js加載進(jìn)度插件的簡(jiǎn)單使用方法
NProgress.js
說(shuō)明:
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)來(lái)
2. 使用場(chǎng)景一:頁(yè)面加載的效果 開(kāi)始頁(yè)面加載開(kāi)始進(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ā)送的效果 開(kāi)始發(fā)送開(kāi)始進(jìn)度條 成功后 結(jié)束進(jìn)度條:
<script> $(window).ajaxStart(function () { NProgress.start(); }); $(window).ajaxStop(function () { NProgress.done(); }); </script> //技巧總結(jié) 此方法掛在window上 是為了監(jiān)聽(tīng)項(xiàng)目中所有的ajax請(qǐng)求 //ajax事件 可參考 jquery 文檔 http://jquery.cuishifeng.cn/
總結(jié)
以上所述是小編給大家介紹的jQuery NProgress.js加載進(jìn)度插件的簡(jiǎn)單使用方法,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
javaScript事件學(xué)習(xí)小結(jié)(四)event的公共成員(屬性和方法)
這篇文章主要介紹了javaScript事件學(xué)習(xí)小結(jié)(四)event的公共成員(屬性和方法)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06js實(shí)現(xiàn)適配移動(dòng)端的拖動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)適配移動(dòng)端的拖動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-01-01基于js與flash實(shí)現(xiàn)的網(wǎng)站flv視頻播放插件代碼
這篇文章主要介紹了基于js與flash實(shí)現(xiàn)的網(wǎng)站flv視頻播放插件代碼,該功能在很多網(wǎng)站上都有著廣泛的應(yīng)用,本文以實(shí)例形式對(duì)其進(jìn)行介紹,需要的朋友可以參考下2014-10-10JavaScript函數(shù)的一些注意要點(diǎn)小結(jié)及js匿名函數(shù)
本文給大家總結(jié)了javascript函數(shù)的一些注意要點(diǎn)及js匿名函數(shù),主要知識(shí)點(diǎn)有:函數(shù)的基本語(yǔ)法、函數(shù)的參數(shù)、函數(shù)的重載相關(guān)知識(shí),對(duì)本文感興趣的朋友一起學(xué)習(xí)吧2015-11-11CountUp.js數(shù)字滾動(dòng)插件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了CountUp.js數(shù)字滾動(dòng)插件的使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10微信小程序入口場(chǎng)景的問(wèn)題集合與相關(guān)解決方法
這篇文章主要介紹了微信小程序入口場(chǎng)景的問(wèn)題集合與相關(guān)解決方法,從零開(kāi)始開(kāi)發(fā)一個(gè)小程序,大多數(shù)坑點(diǎn)都是在微信小程序的各個(gè)入口場(chǎng)景處。所以這里整理一下微信小程序的各個(gè)入口場(chǎng)景會(huì)面臨的問(wèn)題以及解決方案,需要的朋友可以參考下2019-06-0620170918 前端開(kāi)發(fā)周報(bào)之JS前端開(kāi)發(fā)必看
本文給大家分享了最新版js 前端開(kāi)發(fā)周報(bào),內(nèi)容非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-09-09