頁面載入時顯示一個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");
},