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