nprogress和ajax全局事件

nprogress

官方网站:http://ricostacruz.com/nprogress/
下载地址:https://github.com/rstacruz/nprogress 依赖于 jQuery (1.8版本及以上),添加 nprogress.js 和 nprogress.css 到你的项目中。 NProgress.start() — 显示进度条
NProgress.set(0.4) —设置百分比
NProgress.inc() — 增加一点点
NProgress.done() — 完成进度条

配置

通过 minimum 来修改最小百分比。
NProgress.configure({ minimum: 0.1 }); 你可以通过 template 修改标记结构。为了保证进度条正常工作,需要一个包含 role='bar' 属性的元素。
NProgress.configure({
template: "..."
}); 通过 ease(一个 CSS 中的 easing 值) 调整动画设置和速度 speed (毫秒ms)。
NProgress.configure({ ease: 'ease', speed: 500 }); 想关闭进度条步进?设置 trickle 为 false。
NProgress.configure({ trickle: false }); 你可以调整 trickleRate (每次步进增长多少) 和 trickleSpeed (步进间隔,单位毫秒ms).
NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 }); 想禁用进度环?设置 showSpinner 为 false。
NProgress.configure({ showSpinner: false });

ajax6个全局事件

都是绑在$(document).xxx

加载请求: .ajaxStart() 和 .ajaxstop()

错误处理: .ajaxError()

.ajaxSuccess(),对应一个局部方法:.success(),请求成功完成时执行。

.ajaxComplete(),对应一个局部方法:.complete(),请求完成后注册一个回调函数。

.ajaxSend(),没有对应的局部方法,只有属性 beforeSend,请求发送之前要绑定的函数。

例子:
$(document).ajaxStart(function(){
$('.loading').show();
}).ajaxStop(function(){
$('.loading').hide();
}); 注意: 在 jQuery1.5 版本以后,使用.success()、.error()和.complete()连缀的方法,可以用.done()、.fail()和.always()取代。

nprogress进度条和ajax全局事件的更多相关文章

  1. Jquery表单序列化和AJAX全局事件

    Jquery表单序列化 1.必须放在form标签内: 2.控件必须有name属性: 3.控件的value值会提交到服务器: 如: <form id="form1"> & ...

  2. 锋利的jQuery读书笔记---jQuery中Ajax--序列化元素、Ajax全局事件

    serialize()方法: 作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求. <!DOCTYPE html> <html> <hea ...

  3. jquery的ajax全局事件详解

        jquery在ajax方面是非常强大和方便的,以下是jquery进行ajax请求时方法模板: $.ajax({ type: "get", url: "" ...

  4. ajax全局事件

    作用:当你的页面存在很多ajax事件的话,我们有一些信息是公共的,可以复用,我们可以用全局事件进行编写,因为每一个ajax事件调用,都会触发ajax全局事件. jquery的ajax方法的全部全局事件 ...

  5. jQuery中的Ajax全局事件

    Ajax全局事件 全局事件会在有ajax请求的情况下触发. 方法名称 说明 ajaxStart(callback) Ajax请求开始时执行的函数 ajaxStop(callback) Ajax请求结束 ...

  6. 关于数据未渲染完,要获取document高度问题——ajax全局事件

    昨天在做开发时,遇到这样一个问题,当页面刚加载的时候,就要获取document的高度,可是此时页面上所有的ajax请求的数据都还没有渲染到页面上,所以导致得到的document的高度仅仅是页面结构的高 ...

  7. Vue项目开发,nprogress进度条加载之超详细讲解及实战案例

    Nprogress的默认进度条很细,它的设计灵感主要来源于 谷歌,YouTube 他的安装方式也很简单,你可以有两种使用方式: 直接引入js和css文件 使用npm安装的的方式 直接引入: Npm安装 ...

  8. jquery ajax 全局事件

    jquery的ajax方法的全部全局事件:(不管是$.ajax().$.get().$.load().$.getJSON()等都会默认触发全局事件) ajaxStart:ajax请求开始前 ajaxS ...

  9. android中SeekBar拖动进度条的使用及事件监听

    下面和大家分享一下android中SeekBar拖动进度条的使用,以及事件监听.拖动进度条的事件监听需要实现SeekBar.OnSeekBarChangeListener接口,调用SeekBar的se ...

随机推荐

  1. Bomb HDU - 3555

    Bomb HDU - 3555 求1~n中含有49数的个数 #include<bits/stdc++.h> #define LL long long using namespace std ...

  2. 关于 BaseHTTPServer 的介绍

    简介: (1) 基础的web服务器是一个模板,其其角色是客户端和服务器端完成必要的HTTP交互,在basehttpserver模块中可以找到一个名字叫HTTPServer 的服务器基本类 (2)处理程 ...

  3. CentOS6.8 安装python2.7,pip以及yum

    由于CentOS6.8里自带的yum所依赖的python是2.6.66版本,但是安装pip至少要求python是2.7版本,因而原有的2.6并不能卸载,又得安装新的2.7.之前安装的时候强制卸载了2. ...

  4. 面试题:你能写一个Vue的双向数据绑定吗?

    在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...

  5. 8.3 操作MongoDB数据库

    一项权威调查显示,在大数据时代软件开发人员必备的十项技能中MongoDB数据库名列第二,仅次于HTML5.MongoDB是一个基于分布式文件存储的文档数据库,可以说是非关系型(Not Only SQL ...

  6. [luoguP1816] 忠诚(st表 || 线段树)

    传送门 其实我就是想练练 st表 本以为学了线段树可以省点事不学 st表 了 但是后缀数组中用 st表 貌似很方便 所以还是学了吧,反正也不难 ——代码 #include <cstdio> ...

  7. 06springMVC数据验证

    u  声明式数据验证 u  内置的验证约束和注解 u  错误消息 u  功能处理方法上多个验证参数的处理 u  异常处理的支持 1      声明式数据验证 Spring3开始支持JSR-303验证框 ...

  8. 百度地图API位置偏移的校准算法

    转自极客人原文 百度地图API位置偏移的校准算法 在开始使用百度地图API进行开发时可能会遇到一件相当奇怪的事情,使用百度定位的经纬度在地图上显示相当不准确,这一问题我在微信开发和安卓开始时都遇到过. ...

  9. ubuntu网卡ip的配置

    ifconfig 命令的结果 和 ip addr (或者查看具体网卡的是 ip addr show eth0) 看到的结果不一样, ip addr show eth0 可以看到eth0网卡上面的多个 ...

  10. apache zookeeper的安装

    original article:http://zookeeper.praveendeshmane.co.in/zookeeper/zookeeper-3-4-6-single-server-setu ...