Biblioteca front-end: barra de progresso de carregamento de páginas JS

Pequeno · Publicado em 18/01/2016 11:02:55

Vamos dar uma olhada nas renderizações primeiro:

Fácil de usar:

Passo 1: Copie a pasta de templates, pasta de temas, pace.js pace.min.js para o projeto

Passo 2: Introduza estilos CSS e scripts 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>

Copiar código

Passo 3: Abra a página e pronto.

Configuração personalizada

Pace.js será carregado automaticamente na página, sem necessidade de se conectar a nenhum código, e o progresso será detectado automaticamente. Se quiser fazer alguns ajustes, pode configurar o window.paceOptions para personalizar a configuração:

<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>

Copiar código

Você também pode colocar configurações personalizadas na tag scrip{filter}t, por exemplo:

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

Copiar código

Se você usar AMD ou Browserify para carregar módulos, pode configurar assim (por exemplo, iniciar):

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

Copiar código

Use a API

Lista de APIs Pace.js público:

Pace.start: Começa a mostrar a barra de progresso, se você não estiver usando AMD ou Browserify para carregar módulos, isso será executado por padrão.
Pace.restart: A barra de progresso recarrega e é exibida.
Pace.stop: esconde a barra de progresso e para de carregar.
Pace.track: Monitore uma ou mais tarefas de solicitação.
Pace.ignore: Ignore uma ou mais tarefas de solicitação.

Download do Arquivo:

pace-0.5.6.zip (153.26 KB, Número de downloads: 2)

[JavaScript] Biblioteca front-end: barra de progresso de carregamento de páginas JS

Posts Relacionados