Фронтенд библиотека: лента за зареждане на JS страница

Малък боклук · Публикувано в 18.01.2016 г. 11:02:55 ч.

Нека първо разгледаме визуализациите:

Лесен за използване:

Стъпка 1: Копирайте папката шаблони, теми, pace.js pace.min.js в проекта

Стъпка 2: Въведете CSS стилове и JS скриптове

<div><link href="/Content/pace/themes/pace-theme-center-atom.css" rel="stylesheet" /></div><div><scrip{过滤}t src="/Content/pace/pace.min.js"></scrip{过滤}t></div>

Копирай код

Стъпка 3: Отворете страницата и сте готови.

Персонализирана конфигурация

Pace.js се зарежда автоматично на страницата, няма нужда да се свързва с код, а напредъкът ще бъде автоматично засечен. Ако искате да направите някои корекции, можете да зададете window.paceOptions за персонализиране на конфигурацията:

<div> paceOptions = {</div><div> // Disable the 'elements' source</div><div> elements: false,</div><div> </div><div> // Only show the progress on regular and ajax-y page navigation,</div><div> // not every request</div><div> restartOnRequestAfter: false</div><div> }</div>

Копирай код

Можете също да сложите персонализирани настройки в таг scrip{filter}t, например:

<scrip{过滤}t data-pace-options='{ "ajax": false }' src='pace.js'></scrip{过滤}t>

Копирай код

Ако използвате AMD или Browserify за зареждане на модули, можете да го настроите така (например start):

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

Копирай код

Използвайте API-то

Списък на публичните API-та Pace.js:

Pace.start: Започва да показва лентата за прогрес, ако не използвате AMD или Browserify за зареждане на модули, това ще се изпълнява по подразбиране.
Pace.restart: Лентата за прогрес се презарежда и показва.
Pace.stop: скрива лентата за прогрес и спира зареждането.
Pace.track: Следете една или повече задачи за заявки.
Pace.ignore: Игнорирайте една или повече задачи за заявка.

Изтегляне на файла:

pace-0.5.6.zip (153.26 KB, Брой изтегляния: 2)

[JavaScript] Фронтенд библиотека: лента за зареждане на JS страница

Свързани публикации