苍穹
管理员
管理员
  • UID2
  • 粉丝0
  • 关注0
  • 发帖数202
阅读:8421回复:1

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

楼主#
更多 发布于:2018-07-10 22:06
写在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"); },


苍穹
管理员
管理员
  • UID2
  • 粉丝0
  • 关注0
  • 发帖数202
沙发#
发布于:2018-07-10 22:06
游客


返回顶部