使用Pace.Js美化你的网站加载进度条

更新日期: 2022-02-05阅读: 1k标签: 加载

pace.js介绍

pace.js是一个自动加载页面进度栏的小插件,它可以自动监视您的Ajax请求,事件循环滞后,文档就绪状态以及页面上的元素来确定进度。在ajax导航上,它也能进行监听,同时他也可以很方便的集成到Wordpress中。

由于官网文档是用全英文写的,所以我在接下的介绍中会尽量用自己的额语言来向大家介绍其使用过程.


1.配置介绍

Pace是全自动的,无需进行配置即可上手。如果我们想进行一些调整,请按以下步骤操作:我们可以window.paceOptions在导入文件之前进行设置:

paceOptions = {
  // 禁用元素源
  elements: false,

  // 只在常规下和ajax导航下展示进度条
  // not every request
  restartOnRequestAfter: false
}

您还可以在脚本标签上放置选项:

<script >'{ "ajax": false }' src='pace.js'></script>

如果你使用的是AMD或Browserify,则可以将选项传递给start:

define(['pace'], function(pace){
  pace.start({
    document: false
  });
});


2.主题

Pace包含许多主题 ,可帮助我们入门。只要包括适当的css文件。关于如何修改css样式,我在这里给大家举个例子,其实也很方便,如果我们下载了某个主题的css:

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background: #29d;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
}

我们就可以直接修改它,包括进度条的样式,形状等等.


3.收集器

收集器是收集进度信息的代码位。Pace包括四个默认收集器:

  • ajax 监视页面上的所有ajax请求
  • element 检查页面上是否存在特定元素
  • Document 检查文件readyState
  • Event Lag 检查事件循环滞后信号,表明正在执行javascript

可以通过相同名称的配置选项分别配置或禁用它们。

paceOptions = {
  ajax: false, // disabled
  document: false, // disabled
  eventLag: false, // disabled
  elements: {
    selectors: ['.my-page']
  }
};

添加自己的类paceOptions.extraSources以添加更多源。每个源都应该具有一个.progress属性,或者.elements是具有.progress属性的对象列表的 属性。Pace将自动处理所有缩放,以使进度更改对用户而言看起来很平滑。


4.元素

呈现到屏幕上的元素是我们确定页面呈现的一种方法。如果我们想使用该信息源(根本不需要),请指定一个或多个选择器。我们可以使用逗号分隔选择器,以正确处理错误状态(进度条应消失在错误状态),但我们寻找的元素可能永远不会出现:

paceOptions = {
  elements: {
    selectors: ['.timeline,.timeline-error', '.user-profile,.profile-error']
  }
}

当每个选择器匹配某项时,Pace都会认为元素测试成功。对于此示例,当.timeline或.timeline-error存在时以及.user-profile 或.profile-error存在时。


5.重新启动规则

大多数用户希望进度栏在pushState事件发生时自动重新启动(通常表示正在进行ajax导航)。我们可以禁用此功能:

paceOptions = {
  restartOnPushState: false
}

我们还可以对持续时间超过x ms的每个ajax请求重新启动步速。如果我们发出用户不需要知道的ajax请求(例如预缓存),则需要禁用此功能:

paceOptions = {
  restartOnRequestAfter: false
}

我们随时可以通过以下方式手动触发重新启动

Pace.restart()


6.api

Pace公开以下方法:

  • Pace.start:显示进度条并开始更新。如果您不使用AMD或CommonJS,则会自动调用。
  • Pace.restart:显示进度条(如果已隐藏),然后从头开始报告进度。每当pushState或replaceState默认情况下被自动调用。
  • Pace.stop:隐藏进度条并停止对其进行更新。
  • Pace.track:明确跟踪一个或多个请求,请参阅下面的跟踪
  • Pace.ignore:明确忽略一个或多个请求,请参见下面的跟踪


网站中的应用

这里举个我自己使用的例子,比如我们在自己的脚手架中的ejs模板中导入,然后我们再在项目中引入自己的css,这样我们就能安心的在我们的react/vue项目中使用了.


链接: https://fly63.com/article/detial/11085

懒加载的3种实现方式

优势:性能收益:浏览器加载图片、decode、渲染都需要耗费资源,懒加载能节约性能消耗,缩短onload事件时间。节约带宽:这个不需要解释。

图片懒加载的前世今生

到此,实现图片懒加载主要有两种方法: 监听 scroll 事件,通过 getBoundingClientRect() 计算目标元素与视口的交叉状态;IntersectionObserver 接口。

Vue实现懒加载

什么叫懒加载?就是只有在访问的时候才会进行请求加载,这可以有效提升网站打开的速度,加上这行,就可以做到懒加载↓===括号里的路径改成组件的路径,然后就不需要在上面import了

页面性能优化-原生JS实现图片懒加载

在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况。我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片。所以我们需要对图片加载进行优化

js实现图片惰性加载

在讲图片的惰性加载前,我们先来聊聊惰性加载。惰性加载又称为延迟加载、懒加载等,还有个好听的英文名字叫做 lazyload。需要注意的是,惰性加载并不只是图片的专利,Javascript 中函数也有惰性加载的概念

小程序如何使用分包加载

在小程序开发的过程中,小程序的体积会随着版本的迭代变的越来越大,这时候我们就希望能够将小程序分成多个包从服务器下载,这样既可以加快首屏的渲染也便于后续按需加载的实现

php的自动加载的使用

在autoload机制引入前,要引用其他文件中的函数和类需使用include/require把文件加载。随着SPL库中的autoload机制以及命名空间的完善,现代化PHP开发鲜少见到以include/require的方式加载类

js判断异步引入的js文件是否加载完毕

在正常的加载过程中,js的加载都是同步的,也就是在加载过程中,浏览器会阻塞接下来的内容的加载。这时候我们就要用到动态加载,动态加载是异步的,如果我们在后边要用到这个动态加载的js文件里的东西

Flutter异步加载:Future,async/await

Future对象表示异步操作的结果,我们通常通过then()来处理返回的结果;async用于标明函数是一个异步函数,其返回值类型是Future对象;await用来等待耗时操作的返回结果,这个操作会阻塞到后面的代码

简单高效实现一个按需加载图片的逻辑

需求:根据页面滚动,当图片进入视野,就开始加载,否则不加载任何图片。页面加载完成时先调用一下,首屏内的图片。代码简单,却很通用,很实用。方便扩展

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!