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 중국어 웹사이트의 기타 관련 기사를 참조하세요!