"Front-end five minutes" of using pace.js beautify your website loading progress bar

Foreword

A recent website optimization experience, when suddenly found a good thing, pace.js (loading progress bar plug-in), gzip after only a few kb, easy to use, deliberately shared out, but also as one of their own study summary.

pace.js Introduction

pace.js is a small plug-in automatically loads the page progress bar, which can automatically monitor your Ajax request, the event loop lag, the document ready state and the elements on the page to determine progress. On ajax navigation, it also listens, but he can also be very easily integrated into Wordpress, for example:

<head>	
  <script src="/pace/pace.js"></script>	
  <link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" />	
</head>

Official website address: pace.js

Let's show some examples of several pace provided, of course, we can easily modify it to go on to a more customized style loading progress.

As the official website of the whole document is written in English, so I will try to use their own language in the amount of take over in the introduction to introduce its use to you.

1. Configuration Introduction

Pace is a fully automatic, without the need to configure to get started.

If we want to make some adjustments, follow these steps:

We can window.paceOptions set before importing the file:

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

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

You can also place the option on the script tag:

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

If you are using AMD or Browserify, you can pass options to start:

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

2. Theme

Pace contains many topics that can help us get started. As long as including appropriate css file. On how to modify the css style, I am here to give you an example, in fact, very easy, if we downloaded a topic 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;	
}

We can modify it directly, including the progress bar style, shape, and so on.

3. Collector

Collectors are bits of code to collect information about the progress. Pace includes four default collector:

All ajax requests on ajax monitor page
Whether there is a specific element on a page element inspection
Document check file readyState
Event Lag lag check the event loop signal that is executing javascript

You can configure or disable them through the configuration options of the same name, respectively.

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

Add your own classes paceOptions.extraSources to add more sources. Each source should have a .progress attribute, or property of an object having a .elements .progress attribute list. Pace will automatically handle all scaled to change the schedule looks very smooth for the user.

4. elements

Presented to the elements on the screen that we determine a way to page rendering. If we want to use this source of information (not need), please specify one or more selectors. We can use a comma-separated selectors to properly handle the error state (progress bar should disappear in the wrong state), but we are looking for elements that may never come:

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

When each selector matches an item, Pace will think the test is successful elements. For this example, when .timeline or .timeline-error exists and .user-profile presence or .profile-error.

5. Re-start rule

Most users want the progress bar automatically restarts (usually expressed ongoing ajax navigation) pushState when an event occurs. We can disable this feature:

paceOptions = {	
  restartOnPushState: false	
}

Each ajax we can also exceed x ms for the duration of the request to restart the pace. If we send the user does not know the ajax request (such as pre-caching), you need to disable this feature:

paceOptions = {	
  restartOnRequestAfter: false	
}

We can always restart triggered manually by

Pace.restart()

6.API

Pace exposes the following methods:

Pace.start: show progress bar and starts the update. If you do not use AMD or CommonJS, it will be automatically invoked.
Pace.restart: show progress bar (if hidden), and then start from scratch to report progress. It is invoked automatically whenever under pushState or replaceState default.
Pace.stop: hide the progress bar and stops update it.
Pace.track: clear track one or more requests, please see the following track
Pace.ignore: explicitly ignore one or more requests, please see the following track

Application site

Here is an example of my own use, such as our own import scaffolding in ejs template:

<% if(context.env === 'production') { %>	
    <script src="<%= context.config.publicPath %>pace.min.js"></script>	
<% } else {%>	
    <script src="https://cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>	
<% } %>

Then we introduced own css in the project, so that we can feel at ease in using our react / vue project.

Xu Xi _ Shanghai

Published 57 original articles · won praise 83 · views 10000 +

Private letter concerns