zoukankan      html  css  js  c++  java
  • 多个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即可。

      

  • 相关阅读:
    tiled工具使用
    shan
    随笔
    潘大神又一篇
    潘大神的文章
    最近用到这个强大的工具 PhysicsEditor (转)
    为什么要写博客?
    nyoj 998
    欧拉函数
    背包问题
  • 原文地址:https://www.cnblogs.com/chuaWeb/p/5082864.html
Copyright © 2011-2022 走看看