页面加载等待插件

//读取进度条可从  https://loading.io/  生成

css样式

/*加载蒙版css*/
    .loading{
        width: 100%;
        height: 100%;
        position: fixed;
        background-color: #E2F6FB;
        top: 0px;
        left: 0px;
        z-index: 100;
    }
/*等待进度大css*/
.loading .bigpic{
    width: 130px;
    height: 130px;
    background-image: url("../imgs/bigSpinner.gif");
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    margin: auto;
}

/*等待进度小css*/
.loading .smalpic{
    width: 50px;
    height: 50px;
    background-image: url("../imgs/smalSpinner.gif");
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    margin: auto;
}

HTML

<!-- 页面加载等待进度条 -->
<div class="loading"><div class="bigpic"></div></div>
or
<div class="loading"><div class="samllpic"></div></div>

js代码

$(function(){
    //读取数据是否加载成功
    document.onreadystatechange=function(){
        alert(document.readyState);
        //判断页面读取状态   页面读取状态一共四中
        if(document.readyState == "complete"){
        //载入完成fadeOut();移除div样式
            $(".loading").fadeOut();
        }
    }
});
//uninitialized - 还未开始载入
//loading - 载入中
//interactive - 已加载，文档与用户可以开始交互
//complete - 载入完成

ajax请求加载进的条

function initPoint(data){
    //发送请求获取指定分公司所有小区初始坐标点
    $.ajax({
        type:"POST",
        url:$("#basePath").val()+"xxxxx.do",
        data:data,
        dataType:"json",
        beforeSend:function(){
            /*请求发送前向body中添加进度等待蒙版，样式同上*/
            $("body").append("<div class='loading'><div class='bigpic'></div></div>");
        },
        success:function(data){
                /*success逻辑处理*/
                }
            }
        },
        complete:function(xhr){
            /*数据加载完成后，将蒙版移除*/
            $(".loading").fadeOut();
        }
    });
}