多个ajax请求下等待条显示和隐藏的简单处理
处理为遇到ajax请求就显示等待条,直到所有的ajax请求执行完毕才关闭等待条。比较简单,源码如下(基于jQuery)
//基于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即可。