页面加载时显示一个loading的图片或者动画或者提示信息

写在body的下面第一句

。文字:

正在载入,请稍候……

。图片


    
                        
                              
    


设置一下图片的样式,让他放在屏幕的中间。所有内容的上面

#loadingdiv {
    position: relative;
    margin-top: 10px;
}

.loading-block {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    background: rgba(0,0,0,0.4);
    display: none;
    background: transparent;
}


他们起始的状态就是显示的,在这里需要文章加载完就隐藏.

如果是没有ajax的情况,可以用

window.οnlοad=function(){

  $("#loadingdiv").hide();

}

如果是写在app里面。你需要在mui.plusReady(function(){

  $("#loadingdiv").hide();

})

如果有ajax,你可以写在

$.ajax({

     url:'',

    beforeSend: function(data) {$("#loadingdiv").show();},

    compete:function(){$("#loadingdiv").hide();}

})


beforeSend和conpete还有防止按钮重复提交的功能

$.ajax({
    type: "post",
    data: studentInfo,
    contentType: "application/json",
    url: "/Home/Submit",
    beforeSend: function () {
      // 禁用按钮防止重复提交
        $("#submit").attr("disabled", "disabled");
    },
    success: function (data) {
        if (data == "Success") {
            //清空输入框
            clearBox();
        }
    },
    complete: function () {
        $("#submit").removeAttr("disabled");
    },


你可能感兴趣的:(mui,前端小知识)