AJAX 加载效果(遮盖层)

//创建遮罩层函数体

function createMask(){

    var node=document.createElement('div');

        node.setAttribute('id','backdrop');

        node.style="position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;background-color:rgba(0,0,0,0.6);";

        node.style.display="none";

    var html='<div style="position: fixed; top: 38%; left: 38%; z-index: 1001;">';

        html+='<div style="text-align:center;">';

        html+='<img src="../../Images/loading.gif" style="width:60px;height:60px;">';

        html+='<div style="padding-left:10px;font-size:14px;color:#FFF;">网络请求中...</div>';

        html+='</div>';

        html+='</div>';

        node.innerHTML=html;

    var body=document.querySelector('body');

        body.appendChild(node);

}

//开启遮罩层函数体

function showMask(){

    var backdrop=document.getElementById('backdrop');

        $(backdrop).show();

}

//关闭遮罩层函数体

function closeMask(){

    var backdrop=document.getElementById('backdrop');

        $(backdrop).hide();

}

//页面初始化完成，关闭遮罩

document.onreadystatechange = function(){

    if(document.readyState == "complete"){

        closeMask();

    }

}

$(function () {

createMask();//创建遮罩层

showMask();//展示遮罩层

})



AJAX调用部分

beforeSend: function () {

  showMask(); //展示

},

success:function(result){

},

complete:function () {

  closeMask();//关闭

}

巴特西

AJAX 加载效果(遮盖层)

最新文章

热门文章