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

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

亚连원래의: 2018-06-08 17:32:021581검색

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() — 将进度条标为完成状态

사용 단계:

<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/

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

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

관련 기사