多个ajax请求下等待条显示和隐藏的简单处理
2016-03-08 09:26
323 查看
处理为遇到ajax请求就显示等待条,直到所有的ajax请求执行完毕才关闭等待条。比较简单,源码如下(基于jQuery)
需要根据情况改一下loadingSelector 和loadingClass即可。
如果觉得本文不错,请点击右下方【推荐】!
//基于jQuery //从第一个ajax请求发出开始显示等待条?直到一系列ajax请求全部结束才关闭等待条。 //任何ajax触发了ajaxSend事件会显示等待框,所有的ajax都执行完成(ajaxComplete事件)才会关闭等待框 $(function(){ //需要监听的ajax的url var listenUrls = [], //等待条选择器 loadingSelector = '.loading-container', //等待条显示需要添加的class loadingClass = 'loading-ajax-active'; $(document).on('ajaxSend',function(){ //显示等待条 if(listenUrls.length <= 0){ $(loadingSelector).addClass(loadingClass); } //添加监听url listenUrls.push(arguments[2].url); }).on('ajaxComplete',function(){ var ajaxUrl = arguments[2].url; for(var i = 0; i < listenUrls.length; i++){ //删除已经完毕的ajax请求监听 if(listenUrls[i] == ajaxUrl){ listenUrls.splice(i,1); } } //没有需要监听的ajax才关闭等待条 if(listenUrls.length <= 0){ $(loadingSelector).removeClass(loadingClass); } }) });
需要根据情况改一下loadingSelector 和loadingClass即可。
如果觉得本文不错,请点击右下方【推荐】!
相关文章推荐
- OpenCV学习笔记_对图像设置ROI
- 获取iphone的信息
- Oracle_spatial的常见错误与注意事项
- 将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
- placeholder的兼容处理(jQuery下)
- 滚动条滚动到页面底部继续加载的处理实例
- html/css基础篇——html代码编写过程中的几个警惕点
- 多iframe使用tab标签方式添加、删除、切换的处理实例
- iframe的内容增高或缩减时设置其iframe的高度的处理方案
- IE9父容器overflow:auto时,子容器状态更改导致滚动条下出现额外空间的问题探讨
- js基础篇——原型与原型链的详细理解
- [bzoj4367][IOI2014]holiday假期
- Android开发之MediaRecorder类详解
- window、document、html、body、element的事件属性比较
- 报告一个IE很奇葩的滚动条问题——百分比计算宽度为浮点数时的滚动条显示异常
- jQuery 实现bootstrapValidator下的全局验证
- jQuery-1.9.1源码分析系列(十六)ajax——响应数据处理和api整理
- jQuery-1.9.1源码分析系列(十六)ajax——ajax处理流程以及核心函数
- jQuery-1.9.1源码分析系列(十六)ajax——jsonp原理
- Android studio 查看签名文件MD5,SHA1