进度条与遮罩层

nprogress插件的使用
ajax的6个全局事件

nprogress进度条插件

nprogress插件是一个适用于ajax应用的轻量级的进度条插件。

官网

github地址

参考文档：http://blog.csdn.net/joyhen/article/details/24458427

使用步骤

引入js文件和css文件

<link rel='stylesheet' href='nprogress.css'/>
<script src='nprogress.js'></script>

使用进度条插件

//引入了nprogress.js文件后，就有了一个全局对象NProgress对象
//开启进度条
NProgress.start();
//关闭进度条
NProgress.done();

使用场景

添加到你调用 Ajax 的地方！绑定它到 jQuery ajaxStart 和 ajaxStop 事件上

JQ中AJAX的全局事件

ajax提供了6个全局函数，会被页面中所有的ajax请求触发，在不同时间点会触发不同的全局事件。

在页面中会有很多的ajax请求，但是这些ajax请求都有相同的消息机制，比如我们需要在ajax请求发送之前弹出了一个提示框，提示"正在读取数据...." 在ajax请求成功时显示"获取数据成功...",在ajax结束后隐藏提示框。如果不使用全局事件，那么需要在每一个ajax的beforeSend、success、complete回调函数中都加上相同的代码。

jquery的全局事件需要给document注册（固定写法）

$(document).ajaxStart(function () {console.log("ajaxStart在开始一个ajax请求时触发");
});

全局事件的执行时机

1. ajaxStart在开始一个ajax请求时触发//beforeSend回调函数
2. ajaxSend在beforeSend回调函数之后触发//success回调函数
3. ajaxSuccess在success回调函数之后触发//error
4. ajaxError在error回调函数之后触发//complete
5. ajaxComplete在complete回调函数之后触发6. ajaxStop在ajax请求结束时触发

NProgress插件相关推荐

nprogress 插件网页顶部加载进度条
文章目录效果(看顶部) 安装使用 1.基本用法 2.高级用法效果(看顶部) 安装 CSDN地址(我设置的免积分,推荐下载):https://download.csdn.net/download/ ...
nprogress插件进度条
一.安装依赖 npm install nprogress -S 二.引入进度条 NProgress 及对应样式(request.js 文件中) import NProgress from 'nprog ...
Vue项目实战06：nprogress页面加载进度条
博客: https://lvsige.top/ nprogress页面加载进度条前言很多时候在访问网页的时候我们总是看到页面在加载中,可以却不知道要加载多久,无期限的等待总是让人烦躁不安,所以我们 ...
vue 判断页面加载完成_Vue实战040：nprogress页面加载进度条
前言很多时候在访问网页的时候我们总是看到页面在加载中,可以却不知道要加载多久,无期限的等待总是让人烦躁不安,所以我们希望能知道网页加载的进度,这样我们就能做到心中有数是否继续等待页面加载.这个功能我 ...
vue——Nprogress进度条功能实现
下图中的这种顶部进度条是非常常见的,在vue项目中有对应的插件.Nprogress Nprogress进度条的使用方法如下: 1.安装nprogress插件 npm install --save np ...
这个【vue】项目，让我明白了…
目标熟悉vue项目的注意点了解一些插件在vue项目中的使用写在前面写在前面:最近一直感觉对vue好像没有想象中的那么熟悉,对vue底层原理的理解还是若隐若现,于是模糊的自己上手了个vue项目, ...
vue项目优化及步骤
生成打包报告,根据报告优化项目,然后添加进度条,安装nprogress插件,在main.js下编辑代码 //导入进度条插件 import NProgress from 'nprogress' //导入 ...
Ajax基础知识 · 下
Ajax的应用场景: 1.页面上拉加载更多数据 2.列表数据无刷新分页 3.表单项离开焦点数据验证 4.搜素框提示文字下拉列表 Ajax运行原理: 服务器端响应的数据格式:在http请求与响应的过程中 ...
【vue】基于vue2.x的vue项目最最最基础模板
前言好久不见啊大家,今天想写这篇博客的时候才发现博客已经断更大半年了(手动滑稽) 由于去年十二月份被公司再次发配到上海出差,而且这次主要开发的是针对IE浏览器的一个插件(c++ 和 js 的交互) ...

NProgress插件