JavaScript插件——pace.js的快速掌握-阿里云开发者社区

开发者社区> 振礼硕晨> 正文

JavaScript插件——pace.js的快速掌握

简介: 我们在做项目的时候,可能遇到制作 网页进度条加载 的需求。如果你感觉无从下手,那么你可以通过阅读这篇文章,快速掌握一款好用的JavaScript插件,来快速制作出炫酷的 网页进度条加载效果。
+关注继续查看

我们在做项目的时候,可能遇到制作 网页进度条加载 的需求。如果你感觉无从下手,那么你可以通过阅读这篇文章,快速掌握一款好用的JavaScript插件,来快速制作出炫酷的 网页进度条加载效果

一、关于pace.js

  • pace.js是一款优秀的JavaScript插件,通过使用pace.js,我们可以制作出不同的网页进度条加载效果。
  • 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况。
  • pace.js为我们提供了不同的加载进度条的主题样式,你可以选择 任意颜色多种动画效果 (例如简约、闪光灯,MAC OSX,左侧填充,顶部填充,计数器和弹跳等等动画效果)。这些效果我们在文章的后面都会以动图的形式展示出来,方便你在写代码的时候,进行挑选。
  • 如果你擅长修改css动画,那你就可以做出无限种可能性的动画,为你的网站增添个性化特色!
  • pace.js官网
  • pace.js源码----GitHub下载
  • pace.js源码----百度云下载
  • API----官网英文版
  • API----中文版

二、小白快速上手pace.js

如果你是没有接触pace.js的小白,那么下面跟着我,快速上手我们的pace.js,快速制作出一个炫酷的进度条加载效果。

  1. 首先根据上面提供的 GitHub链接 或者是 百度云链接,将pace.js源码下载下来,放到我们的项目文件夹中。

  2. 我们下载完成之后,会发现源码中有很多文件,这里我们只需要关注这两个问价。在引入之前,我们先了解一下这些themes文件夹。

img_aed3b245cf0bc3ea53da8a7c17f7d936.png
  1. 打开hemes文件夹,发现其中又有不同的文件夹。
img_ae18571eb83571b75d913428478febc1.png

上面这几个文件夹,分别代表这不同的主题颜色。比如我们选择 blue 这个文件夹,点击进来之后,会发现有多个 .css文件

img_f2b819cd0426f786068ab07b6b58eecc.png

上面这些 .css文件 是我们选择的蓝色主题中,不同的进度条加载样式。具体的加载样式,文章后面会以动图的形式展现出来。

现在我们了解了这些文件,下面就可以以蓝色主题为例,引入 js文件css文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pace.js的使用</title>
    <link rel="stylesheet" href="pace-master/themes/blue/pace-theme-center-atom.css">
    <script src="pace-master/pace.js"></script>
</head>
<body>

</body>
</html>
  1. 引入了文件,我们就已经完成了一个进度条加载效果,而且是可以直接使用在项目中的,下面我们看下具体的效果。
img_e5060de81fd7ad6c4fb711010aeb0be9.gif

备注:

  • 其实到这里,我们已经完成了一个进度条加载效果。无需在js中进行其他配置,毕竟人家官网API文档中已经明确写出了无需进行配置,即可开始使用。
img_83b9059ef5fd6cd398f17ff1ee9281ab.png
  • 但是看到这里,你肯定是想深入了解一下pace.js这个优秀的插件的。毕竟这个插件还有很多好用的API,掌握了这些API,我们会更好的掌握并运用这款插件。

  • 不过在这之前,我先给出几幅动图,展示不同的进度条加载效果。方便大家在自己的项目中,选择合适的 .css文件。

img_2af7115e9b0844477cb6cc2279752796.gif
img_a215824a076d787dc292dd28cc814bb9.gif
img_065ce1ee9f03ea58af63257a3d42d210.gif
img_c7b29c54ef5f6b4962ca7004a3be42b6.gif
img_8ceaa6e2617539bd084c43783aaa26f9.gif
img_2cc0aedbc7b2b0f77f86e708c4166e01.gif
img_8b471399883775983bac631a08d9dc28.gif
img_cbc0d678ef8ed1d4ee6c0a0d2ad04b19.gif
img_8b587b4cd654e2e54c16e2305663d094.gif
img_efb4abf24f8de8c67b25ead8ed991f50.gif
img_924eaa03823a5286347d545a8853e481.gif
img_12fc21646b9705ff4a27ddb8f6a2e4b4.gif
img_903aab15e3e6aac91bc4eb4422e5a216.gif
img_544bad552db5bafc78a4373accd9623b.gif
img_28466032d5153e9bc3a48e99332221fc.gif

二、进一步配置pace.js

  • 这里建议大家阅读官网上面的API文档 API----官网英文版,虽然是英文版本,但是阅读起来难度不大。
  • 如果你死活读不下去英文,这里有国内大佬翻译的中文版 API----中文版,可以借鉴参考一下。

1. 基础配置pace.js

  • Pace.js会自动加载到页面中,不需要挂接到任何代码,会自动检测进度。如果你想做一些调整,你可以设置window.paceOptions来自定义配置:
paceOptions = {
    ajax: false, // disabled
    document: false, // disabled
    eventLag: false, // disabled
    elements: {
        selectors: ['.my-page']
    }
};
  • 你也可以将自定义设置放到script标签内,例如:
<script data-pace-options='{ "ajax": false }' src='pace.js'></script>
  • 如果你使用AMD或者Browserify来加载模块的话,你可以通过这样子来设置(例如:start):
 define(['pace'], function(pace){
     pace.start({
         document: false
     });
 });

2. 使用pace.js公开的方法,控制进度条

2-1. Pace.js公开的方法列表:

  • Pace.start:开始显示进度条,如果你不是使用AMD或者Browserify来加载模块的话,这个会默认执行。
  • Pace.restart:进度条重新加载以及显示。
  • Pace.stop:隐藏进度条以及停止加载。
  • Pace.track:监测一个或者多个请求任务。
  • Pace.ignore:忽略一个或者多个请求任务。

2-2. 这些公开的方法如何使用:

  • 我们可以通过这些公开的方法来控制进度条的 开始加载、重新加载、停止加载

  • 例如:现在我们通过点击网页上的【重新加载】按钮,来重新加载进度条

// 获得【重新加载】按钮
var btn=document.getElementById('btn');
// 点击按钮,重新加载页面,进度条也会重新加载
btn.onclick=function(){
    Pace.restart();
}
img_2abbaba6d02aa437b2ce8adfb1d7b4f5.gif

3. 使用pace.js的事件,控制进度条完成前后的动作

3-1. Pace.js的事件列表:

  • start:进度条开始加载或者是重新加载的时候
  • stop:进度条停止加载的时候
  • restart:进度条重新加载
  • done:进度条重新完成加载的时候
  • hide:当进度条被隐藏的时候

3-2. 这些事件如何使用:

  • 我们可以通过使用 Pace.on(event, handler) 来使用这些事件,完成我们的工作

  • 例如:页面加载完毕之后,进行弹窗提醒

Pace.on("done",function(){
    alert("页面加载完毕");
})
img_227c4fcf227fa7bdca8ae2d497887734.gif

三、最后备注

  • 这就是pace.js的基本使用方法,希望这篇文档可以帮助到你。
  • 如果有什么其他的问题,建议大家多看看官方文档,那就是指南针!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10071 0
使用NAT网关轻松为单台云服务器设置多个公网IP
在应用中,有时会遇到用户询问如何使单台云服务器具备多个公网IP的问题。 具体如何操作呢,有了NAT网关这个也不是难题。
26787 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
11606 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
9157 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13880 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7362 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4500 0
+关注
振礼硕晨
爱学习,爱设计
43
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载