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鼠标移动图片上实现放大效果
Jun 25 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
基于jquery实现多级菜单效果
Jul 25 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
jQuery创建折叠式菜单
Jun 15 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
jQuery-App输入框实现实时搜索
Nov 19 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的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
标准PHP的AES加密算法类
2015/03/12 PHP
PHP实现JS中escape与unescape的方法
2016/07/11 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
PHP 7.0新增加的特性介绍
2017/06/08 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
jQuery的12招常用技巧分享
2011/08/08 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
JavaScript匿名函数用法分析
2015/02/13 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
简述Jquery与DOM对象
2015/07/10 Javascript
详解Bootstrap按钮
2016/01/04 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
2016/12/12 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
AngularJS使用拦截器实现的loading功能完整实例
2017/05/17 Javascript
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
JS实现排行榜文字向上滚动轮播效果
2019/11/26 Javascript
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
Python学习思维导图(必看篇)
2017/06/26 Python
python进程的状态、创建及使用方法详解
2019/12/06 Python
Python decimal模块使用方法详解
2020/06/08 Python
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
当当网官方旗舰店:中国图书销售夺金品牌
2018/04/02 全球购物
行政文员岗位职责
2013/11/08 职场文书
学校消防安全制度
2014/01/30 职场文书
大四毕业生自荐书
2014/07/05 职场文书
教师个人培训总结
2015/02/11 职场文书
小学生法制教育心得体会
2016/01/14 职场文书
《全神贯注》教学反思
2016/02/22 职场文书
nginx 多个location转发任意请求或访问静态资源文件的实现
2021/03/31 Servers