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实现瀑布流页面
Apr 11 jQuery
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
使用jquery实现轮播图效果
Jan 02 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
8个出色的WordPress SEO插件收集
2011/02/26 PHP
浅析php中json_encode()和json_decode()
2014/05/25 PHP
什么是PEAR?什么是PECL?PHP中两个容易混淆的概念解释
2015/07/01 PHP
linux下为php添加iconv模块的方法
2016/02/28 PHP
php短信接口代码
2016/05/13 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
js中的window.open返回object的错误的解决方法
2009/08/15 Javascript
自用js开发框架小成 学习js的朋友可以看看
2010/11/16 Javascript
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
js实现会跳动的日历效果(完整实例)
2017/10/18 Javascript
了解javascript中let和var及const关键字的区别
2019/05/24 Javascript
原生js实现无缝轮播图效果
2021/01/28 Javascript
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
浅谈Python中列表生成式和生成器的区别
2015/08/03 Python
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
Python+Django搭建自己的blog网站
2018/03/13 Python
在Python中获取操作系统的进程信息
2019/08/27 Python
python numpy矩阵信息说明,shape,size,dtype
2020/05/22 Python
Pycharm 2020.1 版配置优化的详细教程
2020/08/07 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
css3如何绘制一个圆圆的loading转圈动画
2018/01/09 HTML / CSS
HTML5计时器小例子
2013/10/15 HTML / CSS
家乐福巴西网上超市:Carrefour巴西
2016/10/31 全球购物
德国旅游网站:weg.de
2018/06/03 全球购物
初婚未育证明
2014/01/15 职场文书
中国好声音华少广告词
2014/03/17 职场文书
政治学求职信
2014/06/03 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
企业法律事务工作总结
2015/08/11 职场文书
pycharm debug 断点调试心得分享
2021/04/16 Python