在页面加载或使用 ASP.Net 进行 PostBack 时显示加载进度图像答案

【问题标题】：Display loading progress image when Page Loads or does PostBack using ASP.Net在页面加载或使用 ASP.Net 进行 PostBack 时显示加载进度图像
【发布时间】：2015-10-07 09:58:32
【问题描述】：

我的项目有时加载一个页面大约需要 1 分钟或更长时间，所以我想向用户显示一条等待消息或等待状态。

我的项目有一个login.aspxpage 和两个按钮，welcome.aspxpage 和clientsDatas.aspxpage 和一个Master 页面。

我没有找到一些使用 JQuery 的方法，例如：

<script type="text/javascript">
function ShowProgress() {
    setTimeout(function () {
        var modal = $('<div />');
        modal.addClass("modal");
        $('body').append(modal);
        var loading = $(".loading");
        loading.show();
        var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
        var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
        loading.css({ top: top, left: left });
    }, 200);
}
$('form').live("submit", function () {
    ShowProgress();
});

我把它放到我的 MasterPage 和其他子页面的加载方法中：

if (!IsPostBack)
        {
            string script = "$(document).ready(function () { $('[id*=bt_submit]').click(); });";
            ClientScript.RegisterStartupScript(this.GetType(), "load", script, true);
        }

但它不起作用。

那是我的 CSS：

.modal {
position: fixed;
top: 0;
left: 0;
background-color: black;
z-index: 99;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
min-height: 100%;
width: 100%;
}
.loading {
font-family: Arial;
font-size: 10pt;
border: 5px solid #67CFF5;
width: 200px;
height: 100px;
display: none;
position: fixed;
background-color: White;
z-index: 999;
}

我可以在我的masterPage中只输入一个代码，并且每次点击子页面的提交按钮时都可以执行它吗？

谁能帮帮我？

【问题讨论】：

您是否希望在整个 DOM 加载之前显示加载消息？
我想在单击 X 和 Y 按钮而不是单击 Z 按钮时显示一条消息
不要使用.live()，除非你不能使用jQuery 1.7+
@Ishettyl 我可以使用什么而不是 .live() ？
在适当的元素加载到 DOM 后绑定处理程序

标签： javascript c# jquery asp.net

【解决方案1】：

因为我有一个母版页和许多子页，所以我在我的 MasterPage 的主表单中添加了一部分 Jquery 代码，并且当 masterForm 提交时（提交时间太长时它显示 wating 图像）

我添加到我的 masterPage 的 JQuery 代码：

<%-- Start of wating message  --%>
    <script type="text/javascript">
        $("#MasterFormID").submit(function () {
            $("body").addClass("loading disp");
            $("#modal").addClass("disp");                
        });
    </script>
    <div id="modal" class="modal" style="text-align: center">
    </div>
    <%-- End of wating message  --%>

风格：

.modal {
display:    none;
position:   fixed;
z-index:    1000;
top:        0;
left:       0;
height:     100%;
width:      100%;
background: rgba( 255, 255, 255, .8 ) 
            url('../images/ajax-loader-image.gif') 
            50% 50% 
            no-repeat;
}
.loading {
overflow: hidden;   
}
.disp {
display: block;
}

注意：我必须将 JQuery 导入我的 masterPage。

所以我这样做了，我工作得很好

【讨论】：