Фронтенд-библиотека: шкала загрузки страницы 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 для загрузки модулей, можно настроить всё так (например, старт):

<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

Связанные публикации