pace.js頁面加載進度條插件
本文簡單介紹插件pace.js.
在頁面中引入Pace.js，頁面就會自動監(jiān)測你的請求（包括Ajax請求），在事件循環(huán)滯后，會在頁面記錄加載的狀態(tài)以及進度情況。此插件的兼容性很好，可以兼容IE8以上的所有主流插件，而且其強大之處在于，你還可以引入加載進度條的主題樣式，你可以選擇任意顏色和多種動畫效果（例如簡約、閃光燈，MAC OSX，左側(cè)填充，頂部填充，計數(shù)器和彈跳等等動畫效果），如果你擅長修改css動畫，那你就可以做出無限種可能性的動畫，為你的網(wǎng)站增添個性化特色！
調(diào)用方法：
引入Pace.js以及主題文件即可：
<head> <script src="/pace/pace.js"></script> <link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" /> </head>
自定義配置：
Pace.js會自動加載到頁面中，不需要掛接到任何代碼，會自動檢測進度。如果你想做一些調(diào)整，你可以設(shè)置window.paceOptions來自定義配置：
paceOptions = {
// Disable the 'elements' source
elements: false,
// Only show the progress on regular and ajax-y page navigation,
// not every request
restartOnRequestAfter: false
}
你也可以將自定義設(shè)置放到script標簽內(nèi)，例如：
<script data-pace-options='{ "ajax": false }' src='pace.js'></script>
如果你使用AMD或者Browserify來加載模塊的話，你可以通過這樣子來設(shè)置（例如：start）：
define(['pace'], function(pace){
pace.start({
document: false
});
});
使用API：
Pace.js公開的API列表：
Pace.start：開始顯示進度條，如果你不是使用AMD或者Browserify來加載模塊的話，這個會默認執(zhí)行。
Pace.restart：進度條重新加載以及顯示。
Pace.stop：隱藏進度條以及停止加載。
Pace.track：監(jiān)測一個或者多個請求任務(wù)。
Pace.ignore：忽略一個或者多個請求任務(wù)。
基本上大致使用方法就這些，還有其他的一些方法的使用，各位就前往到官網(wǎng)去查看更加詳細的介紹。希望這個插件可以幫助到大家！
相關(guān)文章
JavaScript語法 JSON序列化之stringify實例詳解
這篇文章主要為大家介紹了JavaScript語法 JSON序列化之stringify實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
鼠標右鍵大家都經(jīng)常操作，但是鼠標的內(nèi)容是不是符合大家的“口味”？這篇文章就是教大家如何定制自己專屬鼠標右鍵,需要的朋友可以參考下2015-08-08
最近在做公司的小程序項目,發(fā)現(xiàn)設(shè)計上有很多不統(tǒng)一,代碼上有很多冗余,下面這篇文章主要給大家介紹了關(guān)于小程序開發(fā)實戰(zhàn)指南之封裝自定義彈窗組件的相關(guān)資料,需要的朋友可以參考下2022-11-11
在本文里小編給各位分享的是關(guān)于js中switch語句的使用方法及學(xué)習(xí)筆記內(nèi)容，有興趣的朋友們可以參考下。2020-03-03
這篇文章主要為大家詳細介紹了javascript實現(xiàn)平滑無縫滾動的具體代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-05-05
下面小編就為大家?guī)硪黄猻encha ext js 6 快速入門(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要介紹了JS+Canvas實現(xiàn)的俄羅斯方塊游戲,結(jié)合完整實例形式分析了Canvas技術(shù)實現(xiàn)俄羅斯方塊游戲的步驟、技術(shù)難點與相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2016-12-12
javascript代碼運行的過程中基本類型會找到對應(yīng)的包裝對象，然后包裝對象把所有的屬性和方法給了基本類型，然后包裝對象被系統(tǒng)進行銷毀，所以理解了包裝對象可以很好的理解之前寫的代碼為什么可以這樣做了。2015-07-07
TypeScript聯(lián)合類型,交叉類型和類型保護
這篇文章主要介紹了TypeScript聯(lián)合類型,交叉類型和類型保護，聯(lián)合類型就是定義一些類型，定義的變量只需要滿足任意一種類型即可，交叉類型就是需要滿足所有類型，交叉類型使用，更多內(nèi)容我們來看看下面文章詳細內(nèi)容吧2021-12-12
這篇文章主要介紹了淺析Bootstrap組件之面板組件 的相關(guān)資料,需要的朋友可以參考下2016-05-05