jQuery 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. 使用場景一:頁面加載的效果 開始頁面加載開始進度條 頁面加載好 結束進度條:
<em id="__mceDel"><script> $(function() { NProgress.start(); $(window).load(function() { NProgress.done(); }); </script> </em>
3.使用場景二:ajax發(fā)送的效果 開始發(fā)送開始進度條 成功后 結束進度條:
<script> $(window).ajaxStart(function () { NProgress.start(); }); $(window).ajaxStop(function () { NProgress.done(); }); </script> //技巧總結 此方法掛在window上 是為了監(jiān)聽項目中所有的ajax請求 //ajax事件 可參考 jquery 文檔 http://jquery.cuishifeng.cn/
總結
以上所述是小編給大家介紹的jQuery NProgress.js加載進度插件的簡單使用方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關文章
javaScript事件學習小結(四)event的公共成員(屬性和方法)
這篇文章主要介紹了javaScript事件學習小結(四)event的公共成員(屬性和方法)的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-06-06基于js與flash實現(xiàn)的網(wǎng)站flv視頻播放插件代碼
這篇文章主要介紹了基于js與flash實現(xiàn)的網(wǎng)站flv視頻播放插件代碼,該功能在很多網(wǎng)站上都有著廣泛的應用,本文以實例形式對其進行介紹,需要的朋友可以參考下2014-10-10JavaScript函數(shù)的一些注意要點小結及js匿名函數(shù)
本文給大家總結了javascript函數(shù)的一些注意要點及js匿名函數(shù),主要知識點有:函數(shù)的基本語法、函數(shù)的參數(shù)、函數(shù)的重載相關知識,對本文感興趣的朋友一起學習吧2015-11-1120170918 前端開發(fā)周報之JS前端開發(fā)必看
本文給大家分享了最新版js 前端開發(fā)周報,內容非常不錯,具有參考借鑒價值,需要的朋友參考下吧2017-09-09