成都企業(yè)網(wǎng)站
建站使用Pace.js為網(wǎng)站創(chuàng)建漂亮的進度欄
對于某些用戶來說,進度條可能是非常有用的。它告知他們離完成任務有多近。通常,這用于提供更加用戶友好的體驗。在您喜歡的瀏覽器上打開網(wǎng)頁時,瀏覽器選項卡中已經(jīng)存在一個默認進度欄,以查看該頁面是否已完全加載。
使用Pace.js,您現(xiàn)在可以將頁面加載進度欄合并到自己的頁面中。
Pace.js是一個JavaScript庫,用于在網(wǎng)站中創(chuàng)建漂亮的頁面加載進度欄。通過檢查ajax請求,文檔就緒狀態(tài),事件循環(huán)滯后(表明正在執(zhí)行javascript)以及頁面上特定元素的存在來自動建立進度。
當進行ajax導航或pushState事件時,進度欄也會再次重新啟動。
入門
Pace.js非常易于實現(xiàn)。即使您的站點中沒有jQuery庫,也可以使用它。你只需要一體化pace.js和一個CSS主題您選擇的盡早到您的文檔:
而已!完成后,您的網(wǎng)站現(xiàn)在有了漂亮的頁面加載進度欄。
進度條演示
組態(tài)
成都企業(yè)網(wǎng)站建站
從實質(zhì)上講,由于Pace.js具有完全的自動化功能,因此無需其他配置。但是,如果默認設(shè)置不能滿足您的需求,那么您也可以使用自己的配置。
要進一步定制,可以選擇兩種簡單的方法。首先,通過在內(nèi)部window.paceOption包含如下所示的配置。
paceOptions = {
// Configuration goes here. Example:
elements: false,
restartOnPushState: false,
restartOnRequestAfter: false
}
第二種方法是,您可以輕松地data-pace-options在script標簽內(nèi)添加,然后定義配置并像這樣調(diào)用speed.js資源。
1個
您可以在源頁面中找到可用配置的完整列表。
成都企業(yè)網(wǎng)站建站最終思想
該插件帶有許多現(xiàn)成的主題。要查看主題的完整列表和演示,可以直接轉(zhuǎn)到插件站點。如果這些主題不適合您,則可以輕松創(chuàng)建自己的主題。借助Pace.js之類的插件,現(xiàn)在您不必擔心在站點中實現(xiàn)加載頁面進度欄的困難。
標題名稱:成都企業(yè)網(wǎng)站建站
文章來源:http://jinyejixie.com/news/183624.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供小程序開發(fā)、虛擬主機、網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、Google、標簽優(yōu)化
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源:
創(chuàng)新互聯(lián)