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)文章
typeScript中數(shù)組類型定義及應(yīng)用詳解
相信大家應(yīng)該都知道ts只允許數(shù)組中包括一種數(shù)據(jù)類型的值,下面這篇文章主要給大家介紹了關(guān)于typeScript中數(shù)組類型定義及應(yīng)用的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05
JavaScript判斷兩種格式的輸入日期的正確性的代碼...2007-03-03
下面小編就為大家?guī)硪黄獪\談layer的iframe彈窗給里面的標簽賦值的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
函數(shù)式編程 是一種 編程規(guī)范，也是一種對語言程序（比如JavaScript）本身能力的 運用方式。本篇文章將從 編程規(guī)范 來介紹函數(shù)式編程的到底是一種什么樣的規(guī)范，希望對大家有所幫助2023-02-02
javascript開發(fā)隨筆一 preventDefault的必要
給a做按鈕的click事件加preventDefault阻止瀏覽器的默認行為貌似是印象中必須的事情2011-11-11
javascript實例--教你實現(xiàn)撲克牌洗牌功能
我們一般都會按照順序把隨機摸過來的牌從小到大的順序在手上理整齊（記得小時候打牌兩副牌手都抓不過來），這篇隨筆就是想通過實現(xiàn)這個功能來熟悉下js中排序數(shù)組等相關(guān)知識。2014-05-05
JS實現(xiàn)利用閉包判斷Dom元素和滾動條的方向示例
這篇文章主要介紹了JS實現(xiàn)利用閉包判斷Dom元素和滾動條的方向,涉及javascript閉包、事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)使用技巧,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了ExtJs異步無法向外傳值和賦值的完美解決辦法,需要的朋友可以參考下2017-06-06
TypeScript?使用?Tuple?Union?聲明函數(shù)重載
這篇文章主要介紹了TypeScript?使用?Tuple?Union?聲明函數(shù)重載，TypeScript 中為函數(shù)添加多個簽名后，依然需要添加相應(yīng)的代碼來判斷并從不同的簽名參數(shù)列表中獲取對應(yīng)的參數(shù)，下文就來探索方法和技巧吧2022-04-04
在Javascript中為String對象添加trim,ltrim,rtrim方法
利用Javascript中每個對象(Object)的prototype屬性我們可以為Javascript中的內(nèi)置對象添加我們自己的方法和屬性。2006-09-09