jQuery NProgress.js加载进度插件的简单使用方法


Posted in jQuery onJanuary 31, 2018

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. 使用场景一:页面加载的效果  开始页面加载开始进度条  页面加载好  结束进度条:

<em id="__mceDel"><script>
$(function() {
 NProgress.start();
 
$(window).load(function() {
   
NProgress.done();
 });
</script>
</em>

3.使用场景二:ajax发送的效果  开始发送开始进度条  成功后  结束进度条:

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

总结

以上所述是小编给大家介绍的jQuery NProgress.js加载进度插件的简单使用方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
jQuery实现滚动效果
Nov 17 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 #jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 #jQuery
jQuery代码优化方法总结
Jan 29 #jQuery
jquery写出PC端轮播图实例
Jan 26 #jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 #jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 #jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 #jQuery
You might like
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
PHP自定义大小验证码的方法详解
2013/06/07 PHP
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
php操作redis中的hash和zset类型数据的方法和代码例子
2014/07/05 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
jQuery使用技巧简单汇总
2013/04/18 Javascript
JS 实现图片直接下载示例代码
2013/07/22 Javascript
JavaScript等比例缩放图片控制超出范围的图片
2013/08/06 Javascript
深入理解JavaScript中的传值与传引用
2013/12/09 Javascript
不要使用jQuery触发原生事件的方法
2014/03/03 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
JavaScript用JSONP跨域请求数据实例详解
2017/01/06 Javascript
jQuery EasyUI Panel面板组件使用详解
2017/02/28 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
2017/05/10 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
vue里面使用mui的弹出日期选择插件实例
2018/09/16 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
2019/04/29 Javascript
JS面向对象实现飞机大战
2020/08/26 Javascript
JavaScript常用8种数组去重代码实例
2020/09/09 Javascript
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
Python根据区号生成手机号码的方法
2015/07/08 Python
python简单实现操作Mysql数据库
2018/01/29 Python
为什么Python中没有&quot;a++&quot;这种写法
2018/11/27 Python
对python中的*args与**kwgs的含义与作用详解
2019/08/28 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
OpenCV4.1.0+VS2017环境配置的方法步骤
2020/07/09 Python
浅析python函数式编程
2020/09/26 Python
2014年六一儿童节演讲稿
2014/05/23 职场文书
生日宴会家属答谢词
2015/09/29 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
2019数学教师下学期工作总结
2019/06/27 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书
JavaScript实现两个数组的交集
2022/03/25 Javascript