> 웹 프론트엔드 > JS 튜토리얼 > jQuery에서 NProgress.js 로딩 진행 플러그인을 사용하는 방법

jQuery에서 NProgress.js 로딩 진행 플러그인을 사용하는 방법

亚连
풀어 주다: 2018-06-08 17:32:02
원래의
1543명이 탐색했습니다.

NProgress는 jquery를 기반으로 하며 버전은 1.8보다 커야 합니다. . 이번 글에서는 NProgress.js 로딩 프로그레스 플러그인의 간단한 사용법을 주로 소개합니다. 필요하신 분들은 참고하시면 됩니다.

NProgress.js

  참고:

  NProgress는 jquery를 기반으로 하며 버전은 > 1.8

다운로드 주소: https://github.com/rstacruz/nprogress

API:

NProgress.start() — 启动进度条
    NProgress.set(0.4) — 将进度设置到具体的百分比位置
    NProgress.inc() — 少量增加进度
    NProgress.done() — 将进度条标为完成状态
로그인 후 복사

사용 단계:

1.

<link rel="stylesheet" type="text/css" href="css/NProgress.css" rel="external nofollow" >
 <script src="js/NProgress.js" type="text/javascript"></script><br>//还有jquery要之前引入进来
로그인 후 복사

소개 2. 사용 시나리오 1: 페이지 로딩 효과 페이지 로딩 시작 진행 bar 페이지가 로드되었습니다. 진행률 표시줄 종료:

<em id="__mceDel"><script>
$(function() {
   NProgress.start();
   $(window).load(function() {
     NProgress.done();
 });
</script>
</em>
로그인 후 복사

3. 사용 시나리오 2: ajax 전송의 효과 시작 진행률 표시줄 보내기 시작 성공 후 진행률 표시줄 종료:

<script>
$(window).ajaxStart(function () {
  NProgress.start();
});
$(window).ajaxStop(function () {
  NProgress.done();
});
</script>
//技巧总结  此方法挂在window上 是为了监听项目中所有的ajax请求
//ajax事件 可参考 jquery 文档 http://jquery.cuishifeng.cn/
로그인 후 복사

위 내용은 모두를 위해 편집한 내용입니다. 앞으로 도움이 될 모든 사람에게 도움이 될 것입니다.

관련 기사:

nodejs+express 환경에서 다자간 채팅방 구축하는 방법

vue-admin과 백엔드(flask)의 분리 및 결합에 대한 자세한 해석

Panda 구현 방법 jquery+css3 Navigation을 사용하는 TV

위 내용은 jQuery에서 NProgress.js 로딩 진행 플러그인을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿