石家莊企業(yè)網(wǎng)站建站
使用Pace.js為網(wǎng)站創(chuàng)建漂亮的進(jìn)度欄 對(duì)于某些用戶來(lái)說(shuō),進(jìn)度條可能是非常有用的。它告知他們離完成任務(wù)有多近。通常,這用于提供更加用戶友好的體驗(yàn)。在您喜歡的瀏覽器上打開網(wǎng)頁(yè)時(shí),瀏覽器選項(xiàng)卡中已經(jīng)存在一個(gè)默認(rèn)進(jìn)度欄,以查看該頁(yè)面是否已完全加載。
使用Pace.js,您現(xiàn)在可以將頁(yè)面加載進(jìn)度欄合并到自己的頁(yè)面中。
Pace.js是一個(gè)JavaScript庫(kù),用于在網(wǎng)站中創(chuàng)建漂亮的頁(yè)面加載進(jìn)度欄。通過(guò)檢查ajax請(qǐng)求,文檔就緒狀態(tài),事件循環(huán)滯后(表明正在執(zhí)行javascript)以及頁(yè)面上特定元素的存在來(lái)自動(dòng)建立進(jìn)度。
當(dāng)進(jìn)行ajax導(dǎo)航或pushState事件時(shí),進(jìn)度欄也會(huì)再次重新啟動(dòng)。
入門
Pace.js非常易于實(shí)現(xiàn)。即使您的站點(diǎn)中沒(méi)有jQuery庫(kù),也可以使用它。你只需要一體化pace.js和一個(gè)CSS主題您選擇的盡早到您的文檔:
而已!完成后,您的網(wǎng)站現(xiàn)在有了漂亮的頁(yè)面加載進(jìn)度欄。
進(jìn)度條演示
組態(tài)
石家莊企業(yè)網(wǎng)站建站從實(shí)質(zhì)上講,由于Pace.js具有完全的自動(dòng)化功能,因此無(wú)需其他配置。但是,如果默認(rèn)設(shè)置不能滿足您的需求,那么您也可以使用自己的配置。
要進(jìn)一步定制,可以選擇兩種簡(jiǎn)單的方法。首先,通過(guò)在內(nèi)部window.paceOption包含如下所示的配置。
paceOptions = {
// Configuration goes here. Example:
elements: false,
restartOnPushState: false,
restartOnRequestAfter: false
}
第二種方法是,您可以輕松地data-pace-options在script標(biāo)簽內(nèi)添加,然后定義配置并像這樣調(diào)用speed.js資源。
1個(gè)
您可以在源頁(yè)面中找到可用配置的完整列表。
石家莊企業(yè)網(wǎng)站建站最終思想
該插件帶有許多現(xiàn)成的主題。要查看主題的完整列表和演示,可以直接轉(zhuǎn)到插件站點(diǎn)。如果這些主題不適合您,則可以輕松創(chuàng)建自己的主題。借助Pace.js之類的插件,現(xiàn)在您不必?fù)?dān)心在站點(diǎn)中實(shí)現(xiàn)加載頁(yè)面進(jìn)度欄的困難。