pac.js – 웹 페이지 자동 로딩 진행률 표시줄 플러그인-JS 튜토리얼-php.cn

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

高洛峰

풀어 주다： 2016-12-16 16:45:15

원래의

1309명이 탐색했습니다.

페이지에 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 중국어 웹사이트를 주목하세요!