pac.js – 웹 페이지 자동 로딩 진행률 표시줄 플러그인
- 高洛峰원래의
- 2016-12-16 16:45:151309검색
페이지에 Pace.js를 도입하면 페이지에서 자동으로 요청(Ajax 요청 포함)을 모니터링합니다. 이벤트 루프가 지연되면 로딩 상태와 진행 상황이 페이지에 기록됩니다. 이 플러그인은 호환성이 매우 뛰어나며 IE8 이상의 모든 주류 플러그인과 호환됩니다. 게다가 이 플러그인의 장점은 로딩 진행률 표시줄의 테마 스타일을 도입할 수도 있다는 것입니다. 단순성, 플래시, MAC OSX, 왼쪽 패딩, 상단 패딩, 카운터 및 바운스 등 애니메이션 효과) CSS 애니메이션 수정에 능숙하다면 애니메이션의 무한한 가능성을 만들어 웹사이트에 개인화된 기능을 추가할 수 있습니다!
사용 방법
Pace.js 및 테마 파일 소개:
<head> <script src="/pace/pace.js"></script> <link href="/pace/themes/pace-theme-barber-shop.css" rel="external nofollow" rel="stylesheet" /> </head>
사용자 정의 구성
Pace.js가 페이지에 자동으로 로드됩니다. , 코드를 연결할 필요가 없으며 진행 상황이 자동으로 감지됩니다. 일부 조정을 원할 경우 window.paceOptions를 설정하여 구성을 사용자 정의할 수 있습니다.
paceOptions = {
// Disable the 'elements' source
elements: false,
// Only show the progress on regular and ajax-y page navigation,
// not every request
restartOnRequestAfter: false
}스크립트 태그에 사용자 정의 설정을 넣을 수도 있습니다(예:
<script data-pace-options='{ "ajax": false }' src='pace.js'></script> AMD 또는 Browserify를 사용하여 모듈을 로드하는 경우 다음과 같이 설정할 수 있습니다(예: 시작). define(['pace'], function(pace){
pace.start({
document: false
});
});API 사용Pace.js 공개 API 목록: Pace.start: 진행률 표시줄 표시를 시작합니다. AMD 또는 Browserify를 사용하여 모듈을 로드하지 않는 경우 기본적으로 실행됩니다. Pace.restart: 진행률 표시줄이 다시 로드되어 표시됩니다. Pace.stop: 진행률 표시줄을 숨기고 로딩을 중지합니다. Pace.track: 하나 이상의 요청 작업을 모니터링합니다. Pace.ignore: 하나 이상의 요청 작업을 무시합니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：js 진행률 표시줄 제어 구현다음 기사：js 진행률 표시줄 제어 구현