pac.js – 웹 페이지 자동 로딩 진행률 표시줄 플러그인

高洛峰
풀어 주다: 2016-12-16 16:45:15
원래의
1308명이 탐색했습니다.

페이지에 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 &#39;elements&#39; source
  elements: false,
  
  // Only show the progress on regular and ajax-y page navigation,
  // not every request
  restartOnRequestAfter: false
  }
로그인 후 복사

스크립트 태그에 사용자 정의 설정을 넣을 수도 있습니다(예:

<script data-pace-options=&#39;{ "ajax": false }&#39; src=&#39;pace.js&#39;></script>
로그인 후 복사
<). 🎜> AMD 또는 Browserify를 사용하여 모듈을 로드하는 경우 다음과 같이 설정할 수 있습니다(예: 시작).

define([&#39;pace&#39;], function(pace){
  pace.start({
    document: false
  });
});
로그인 후 복사
API 사용

Pace.js 공개 API 목록:

Pace.start: 진행률 표시줄 표시를 시작합니다. AMD 또는 Browserify를 사용하여 모듈을 로드하지 않는 경우 기본적으로 실행됩니다.

Pace.restart: 진행률 표시줄이 다시 로드되어 표시됩니다.

Pace.stop: 진행률 표시줄을 숨기고 로딩을 중지합니다.

Pace.track: 하나 이상의 요청 작업을 모니터링합니다.

Pace.ignore: 하나 이상의 요청 작업을 무시합니다.



pace.js – 웹 페이지 자동 로딩 진행률 표시줄 플러그인 관련 기사를 더 보려면 PHP 중국어 웹사이트를 주목하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!