广州网站开发：Pace.js添加自己的页面加载进度条

2019.09.02 广州网站开发

对于一些用户来说,一个进度条可以是一个非常有用的东西。它告诉他们多少近他们完成任务。通常,这是用来给一个更友好的用户体验。你最喜欢的浏览器上打开一个网页时,已经有一个默认的进度条在浏览器选项卡页面完全加载。

与速度。 js,您现在可以将页面加载进度条到自己的页面。

Pace.js 是一个javascript库创建一个漂亮的页面加载进度条在一个网站。自动建立的进步是通过检查ajax请求,文档就绪状态,事件循环滞后(显示正在执行javascript)和页面上的特定元素的存在。

当ajax导航或 pushState 事件发生时,进度条也将再次重新启动。

的步伐。 js非常容易实现。广州网站开发甚至可以使用没有jQuery库在你的网站。你只需要结合pace.js 和一个CSS的主题您所选择的尽可能早地在你的文档:

<头>

<脚本 src=“. . / pace.js”> < /脚本>

<链接 href=“. . /主题/ pace-theme-corner-indicator.css” rel=“样式表” />

头>

就是这样! 你现在完成了,你的网站有一个美丽的页面加载进度条。

物质聪明,有不需要额外的配置步伐。 js完全自动化。但如果默认设置不符合您的需要,您可以使用您自己的配置。

进一步定制,有两个简单的方法可以选择。首先,通过包括内部配置 window.paceOption 像下面。

<脚本>

paceOptions = {

/ /配置。例子:

元素:假的,

restartOnPushState:假的,

restartOnRequestAfter:假

}

脚本>

第二个方法是,你可以很容易地添加 data-pace-options 在脚本标记然后定义配置和调用速度。 js资源一样。

1	<脚本 data-pace-options=“{“ajax”:假}” src=“pace.js”> < /脚本>

你可以找到完整的可用的配置可以使用列表源页面。

这个插件提供了一堆随时可用的主题。查看完整列表和演示的主题,你可以到插件的网站。如果这些主题不适合你,你可以轻松地创建自己的。广州网站开发在插件的帮助像步伐。 js,现在你不需要担心困难实现页面进度条加载到你的网站