jQuery NProgress.js加载进度插件的简单使用方法
更新时间：2018年01月31日 08:41:42 作者：水车
NProgress是基于jquery的，且版本要 >1.8
。这篇文章主要介绍了NProgress.js加载进度插件的简单使用方法,需要的朋友可以参考下
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加载进度插件的简单使用方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
javaScript事件学习小结（四）event的公共成员（属性和方法）
这篇文章主要介绍了javaScript事件学习小结（四）event的公共成员（属性和方法）的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
这篇文章主要介绍了JS代码实现电脑配置检测功能,需要的朋友可以参考下2018-03-03
这篇文章主要为大家详细介绍了js实现适配移动端的拖动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
这篇文章主要介绍了基于js与flash实现的网站flv视频播放插件代码,该功能在很多网站上都有着广泛的应用,本文以实例形式对其进行介绍,需要的朋友可以参考下2014-10-10
本文给大家总结了javascript函数的一些注意要点及js匿名函数，主要知识点有：函数的基本语法、函数的参数、函数的重载相关知识，对本文感兴趣的朋友一起学习吧2015-11-11
判断语句这个我们不陌生,就是判断是否满足指定的条件,如果满足则执行一定的代码,否则跳过,下面这篇文章主要给大家介绍了关于JavaScript中判断的优雅写法,需要的朋友可以参考下2021-10-10
这篇文章主要为大家详细介绍了CountUp.js数字滚动插件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
下面小编就为大家带来一篇基于复选框demo(分享)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了微信小程序入口场景的问题集合与相关解决方法,从零开始开发一个小程序，大多数坑点都是在微信小程序的各个入口场景处。所以这里整理一下微信小程序的各个入口场景会面临的问题以及解决方案,需要的朋友可以参考下2019-06-06
本文给大家分享了最新版js 前端开发周报，内容非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-09-09
最新评论