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

2019.09.02 广州网站开发

57

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

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

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

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

开始

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

1
2
3.
4
<头>
  <脚本 src=“. . / pace.js”> < /脚本>
  <链接 href=“. . /主题/ pace-theme-corner-indicator.css” rel=“样式表” />
头>

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

配置

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

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

1
2
3.
4
5
6
7
8
<脚本>
paceOptions = {
  / /配置。 例子:
  元素:假的,
  restartOnPushState:假的,
  restartOnRequestAfter:假
}
脚本>

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

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

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

最后认为

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

最新案例

寒枫总监

来电咨询

400-6065-301

微信咨询

寒枫总监

TOP