NProgress.js加载进度插件的简单实用方法
2024-10-19 12:36:48
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">
<script src="js/NProgress.js" type="text/javascript"></script><br>//还有jquery要之前引入进来
2. 使用场景一:页面加载的效果 开始页面加载开始进度条 页面加载好 结束进度条:
<script>
$(function() {
NProgress.start();
$(window).load(function() {
NProgress.done();
});
</script>
3.使用场景二:ajax发送的效果 开始发送开始进度条 成功后 结束进度条:
<script>
$(window).ajaxStart(function () {
NProgress.start();
});
$(window).ajaxStop(function () {
NProgress.done();
});
</script>
//技巧总结 此方法挂在window上 是为了监听项目中所有的ajax请求
//ajax事件 可参考 jquery 文档 http://jquery.cuishifeng.cn/
最新文章
- Errors occurred during the build. Errors running builder &#39;JavaScript Validator&#39; on project
- for循环中的 else,break
- kinect driver install (ubuntu 14.04 &; ros-indigo)
- iOS一些系统事件的生命周期
- Android5.0新控件CardView的介绍和使用
- (转)Linux下用mkisofs制作光盘镜像ISO文件
- iOS10.0 TabBar Bug(底部同时展示原生和自定义tabBar)-b
- Line Search and Quasi-Newton Methods
- NSMutableParagraphStyle /NSParagraphStyle
- Linq打印
- LINUX BASH SHELL,小小学习一下
- B站开源播放框架ijkplayer(iOS版)使用教程
- chorme加减乘除浮点数处理
- 【NOIP2012提高组】借教室
- JavaScript树(一) 简介
- H5本地存储详细使用教程(localStorage + JSON数据存储应用框架)
- OpenCL中的half与float的转换
- 同步 Visual Studio Code 的设置与插件
- BEGINNING SHAREPOINT&;#174; 2013 DEVELOPMENT 第14章节--使用Office Services开发应用程序 总结
- 《JQuery常用插件教程》系列分享专栏
热门文章
- 4 二维数组中的查找 JavaScript
- Cannot send session cache limiter - headers already sent问题
- Python 爬虫 招聘信息并存入数据库
- 从零开始一个http服务器(三)-返回response 构造
- 后端系统开发利器之gflags
- mysql自动提交
- 模仿淘宝首页写的高仿页面,脚本全用的原生JS,菜鸟一枚高手看了勿喷哈
- Windows下的SysWow64和System32
- 【转】odoo学习之:Environment
- c++继承详解:共有(public)继承,私有继承(private)继承,保护(protected)继承