自定义ajax,添加loading效果

自定义ajax

/**
 * @desc 自定义ajax请求，添加等待gif
 */
var n=0;
$.defineAjax=function(obj){
    n++;
    if(!$('#loadingDiv')[0]){
        var str='<div id="loadingDiv"><img class="loadingImg" src="'+path+'/ui/common/img/loading.gif"></div>';
        $('body')[0].appendChild($(str)[0]);
    }
    if(typeof obj.success == 'function'){
        var fun=obj.success;
        obj.success=function(res){
                if($('#loadingDiv')[0]){
                    $('#loadingDiv').remove();
                }
                fun(res);
        }
    }
    var opt={
        type:'post',
        data:{},
        dataType:'json',
        beforeSend:function(xhr){},
        complete:function(xhr,status){
            if(--n<=0){
                $('#loadingDiv').remove();
            }
        }
    },option={};
    if(obj.beforeSend===undefined&&obj.complete===undefined){
        option=$.extend({},opt,obj);
    }
    setTimeout(function(){
        $.ajax(option);
    },200)
}

关键能耗指标分析

js：

option为ajax里面的参数

$.pageAjax=function(option){
    if(!$('div.page-loading')[0]){
        $('body').append('<div class="page-loading" style="display:none;"></div>');
    }
    $('div.page-loading').fadeIn(100);
    var op={
        type:"post",
        DataType:'json'
    },fn={
        success:function(res,mes){
            $('body').find('div.page-loading').fadeOut(100);
            if(typeof option.success==='function'){
                option.success(res,mes);
            }
        },
        error:function(XHRObj,err,ext){
            $('body').find('div.page-loading').fadeOut(100);;
            if(typeof option.error==='function'){
                option.error(XHRObj,err,ext);
            }
        }
    }
    var opt=$.extend({},op,option,fn);
    $.ajax(opt);
}

css

div.page-loading{
    position: absolute;
    top:;bottom:;
    left:;right:;
    background: url('../img/page_loading.gif') no-repeat center center;
    margin:auto;
    width:65px;
    height:65px;
    border-radius: 50%;
}

调用：

$.pageAjax(opt.ajax);

效果：

这种正常来说是ok的，单个请求的时候是不会有问题，但是如果有多个请求在发生，并且之前的请求还没有完成的时候，又进行下一个请求，这样就会存在问题

修改：在每次请求之前记录请求的次数，请求之前加1，请求之后不管成功或者失败都减1，如果为0或者小于0，那么就隐藏loading

js

/*
*ajax loading包装插件
*/
$.pageAjax=function(option){
    var op={
        type:"post",
        DataType:'json'
    },fn={
        beforeSend:function(){
            var el=$('div.page-loading');
            if(!el[0]){
                $('body').append('<div class="page-loading" data-times="1" style="display:block;"></div>');
            }else{
                showOrHide(el,'+');
            }
            //每次只有要请求都要显示
            el.fadeIn(100);
        },
        success:function(res,mes){
            showOrHide($('body').find('div.page-loading'),'-');
            if(typeof option.success==='function'){
                option.success(res,mes);
            }
        },
        error:function(XHRObj,err,ext){
            showOrHide($('body').find('div.page-loading'),'-');
            if(typeof option.error==='function'){
                option.error(XHRObj,err,ext);
            }
        }
    }
    var opt=$.extend({},op,option,fn);
    $.ajax(opt);
}
function showOrHide(el,p){
    var num=el.attr('data-times');
    if(isNaN(num)){num=0;}
    if(p=='+'){
        el.attr('data-times',++num);//注意此处是++num  ++i和i++的区别借鉴for循环的例子
    }else if(p=='-'){
        el.attr('data-times',--num);
        if(num<=0){
            el.fadeOut(100);
        }
    }
}

还有一种，直接方式，页面查询数据的时候调用显示的方法，成功或者失败的时候调用隐藏的方法

调用显示：

$("#searchbtn").off("click").on("click","",function(){
    $.fn.showorhideLoading.show();
    getChecknode();
})

调用隐藏

function postAjaxData(param){
    //请求
    $.ajax({
        url:'/findEnergyDayTypeDataList',
        data:param,
        dataType:'json',
        success:function(data){
            $.fn.showorhideLoading.hide();//隐藏loading
            //处理数据
            var dataObj=initData(data.detail);
        },
        error:function(){
            $.fn.showorhideLoading.hide();//隐藏loading
        }
    })
}

html

<div class="loading" style="display: none;"><img src="/static/ui/modules/systemMan/demo/img/loading.gif" alt=""></div>

css

 /*loading效果*/
.loading{
    position:fixed;
    top:;
    left:;
    right:;
    bottom:;
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,.5);
    z-index:;
}
.loading>img{
    position:absolute;
    width:40px;
    height:40px;
    top:;
    left:;
    right:;
    bottom:;
    margin:auto;
}

    /**
     * 控制dialog的显示和隐藏
     */
    $.fn.showorhideLoading={
        show:function(id){
            if(id===undefined){
                id="body";
            }
            //判断是否存在loading
            var el=$(id).find(".loading");
            if(!el[0]){
                $(id).append(
                    '<div class="loading" style="display: block;">'+
                        '<img src="/static/ui/modules/systemMan/demo/img/loading.gif" alt="">'+
                    '</div>'
                );
            }
            el.show()
        },
        hide:function(id){
            if(id===undefined){
                id="body";
            }
            //判断是否存在loading
            var el=$(id).find(".loading");
            if(el){el.hide()}
        }
    }