프론트엔드 라이브러리: JS 페이지 로딩 진행 바

작은 쓰레기 같은 놈들 · 게시됨 2016. 1. 18. 오전 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 사용

공개Pace.js API 목록:

Pace.start: 진행 바가 표시되기 시작하며, AMD나 Browserify를 사용하지 않고 모듈을 불러오지 않으면 기본적으로 실행됩니다.
Pace.restart: 진행 바가 다시 로드되고 표시됩니다.
Pace.stop: 진행 바를 숨기고 로딩을 멈춥니다.
Pace.track: 하나 이상의 요청 작업을 모니터링합니다.
Pace.ignore: 하나 이상의 요청 작업을 무시합니다.

파일 다운로드:

pace-0.5.6.zip (153.26 KB, 다운로드 횟수: 2)

[JavaScript] 프론트엔드 라이브러리: JS 페이지 로딩 진행 바

관련 게시물