페이지에 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>
define(['pace'], function(pace){ pace.start({ document: false }); });