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 ajax请求struts action实现异步刷新
Apr 19 jQuery
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
jquery图片放大镜效果
Jun 23 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
js/jQuery实现全选效果
Jun 17 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 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用身份证号获取星座和生肖的方法
2013/11/07 PHP
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
利用PHP命令行模式采集股票趋势信息
2016/08/09 PHP
浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
浅析JavaScript中的CSS属性及命名规范
2013/11/28 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
2013/12/29 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
JS判断是否360安全浏览器极速内核的方法
2015/01/29 Javascript
原生js制作简单的数字键盘
2015/04/24 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
浅谈angular懒加载的一些坑
2016/08/20 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
2018/08/24 Javascript
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
vue-cli和v-charts实现可视化图表过程解析
2019/10/08 Javascript
小程序点击图片实现png转jpg
2019/10/22 Javascript
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
vue 使用localstorage实现面包屑的操作
2020/11/16 Javascript
Python编写百度贴吧的简单爬虫
2015/04/02 Python
Python实现比较两个列表(list)范围
2015/06/12 Python
python requests 库请求带有文件参数的接口实例
2019/01/03 Python
Python远程linux执行命令实现
2020/11/11 Python
详解numpy1.19.4与python3.9版本冲突解决
2020/12/15 Python
ProBikeKit新西兰:自行车套件,跑步和铁人三项装备
2017/04/05 全球购物
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
敏捷开发的主要原则都有哪些
2015/04/26 面试题
英语简历自我评价
2014/01/26 职场文书
质监局领导班子践行群众路线整改方案
2014/10/26 职场文书
2015年社区关工委工作总结
2015/04/03 职场文书
优秀新员工事迹材料
2019/05/13 职场文书
《中华上下五千年》读后感3篇
2019/11/29 职场文书
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle