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插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jQuery日期范围选择器附源码下载
May 23 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
jQuery实现动态加载瀑布流
Sep 01 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
解析smarty模板中类似for的功能实现
2013/06/18 PHP
php去除字符串换行符示例分享
2014/02/13 PHP
php格式化金额函数分享
2015/02/02 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
2011/09/09 Javascript
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
2013/07/25 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
js实现touch移动触屏滑动事件
2015/04/17 Javascript
JavaScript 不支持 indexof 该如何解决
2016/03/30 Javascript
jQuery如何获取动态添加的元素
2016/06/24 Javascript
jQuery 调用WebService 实例讲解
2016/06/28 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
JS版微信6.0分享接口用法分析
2016/10/13 Javascript
JavaScript队列函数和异步执行详解
2017/06/19 Javascript
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
2019/05/27 Javascript
JS实现手写 forEach算法示例
2020/04/29 Javascript
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
Python干货:分享Python绘制六种可视化图表
2018/08/27 Python
Python的log日志功能及设置方法
2019/07/11 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
pip/anaconda修改镜像源,加快python模块安装速度的操作
2021/03/04 Python
Giglio美国站:意大利奢侈品购物网
2018/02/10 全球购物
会计专业自荐信范文
2013/12/02 职场文书
致跳远、跳高运动员广播稿
2014/01/09 职场文书
银行批评与自我批评
2014/02/10 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
个人总结与自我评价
2015/02/14 职场文书
公司客户答谢酒会祝酒词
2015/08/11 职场文书
教师师德承诺书2016
2016/03/25 职场文书
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS