1. 程式人生 > >頁面載入時顯示一個loading的圖片或者動畫或者提示資訊

頁面載入時顯示一個loading的圖片或者動畫或者提示資訊

寫在body的下面第一句

。文字:<div id="loadingdiv">正在載入,請稍候……</div>
。圖片

<div id="loadingdiv" style="display:block;">
     <div class="loading-block show">                        
           <img src="images/aaa.gif" style="width: 110px;height: 110px;">                   
     </div>
</div>

設定一下圖片的樣式,讓他放在螢幕的中間。所有內容的上面

#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.onload=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");
    },