多个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即可。

 

  

posted @ 2015-12-28 15:57  chua1989  阅读(1260)  评论(0编辑  收藏  举报