页面加载时显示加载进度图像（不提交事件）答案

【问题标题】：Display loading progress image when Page Loads (not submit event)页面加载时显示加载进度图像（不提交事件）
【发布时间】：2014-10-09 17:50:36
【问题描述】：

我需要在页面加载时或在回发期间使用 jQuery 和 JavaScript 显示加载 GIF 图像，以处理需要大量时间执行的长时间运行的任务或进程。

我试过这个解决方案，我没有错误但加载不显示。

下面是我的代码。

非常感谢您在解决这个问题时给我的任何帮助。

.cs

protected void Page_Load(object sender, EventArgs e)
{
    string script = "$(document).ready(function ());";
    ClientScript.RegisterStartupScript(this.GetType(), "load", script, true);
    System.Threading.Thread.Sleep(5000);
    ExportToXLSFunction(); 
}

.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="getData.aspx.cs" Inherits="getData"
    EnableEventValidation="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="/jquery/js/jquery.min.js"></script>
    <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);
        }

        ShowProgress();

    </script>
    <style type="text/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;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="loading" align="center">
        Loading. Please wait.<br />
        <br />
        <img src="/images/wait01.gif" alt="" />
    </div>
    </form>
</body>
</html>

【问题讨论】：

标签： c# javascript jquery asp.net

【解决方案1】：

使用 ajaxStart() 和 ajaxStop()

/**on ajaxStart when process start it comes in this event**/
$( document ).ajaxStart(function() {
  $( ".loading" ).show();
});

/**on ajaxStop when process stop it comes in this event**/
$( document ).ajaxStop(function() {
  $( ".loading" ).hide();
});

【讨论】：

【解决方案2】：

看看提琴手

http://jsfiddle.net/VpDUG/4952/

.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('http://sampsonresume.com/labs/pIkfp.gif') 
                50% 50% 
                no-repeat;
}

这是很好的解释..你会喜欢的。

How can I create a "Please Wait, Loading..." animation using jQuery?

我试过了，效果超级棒。

感谢@Jonathan Sampson

【讨论】：

【解决方案3】：

对基本提交或 ASP.NET 回发进行一些调整。

function doModal(callback) {
 jQuery("body").addClass("loading");
 window.setTimeout(callback, 100);
}
jQuery(document).ready(function () {
 // Override __doPostBack()
 if (typeof(__doPostBack) != "undefined") {
  var dp = __doPostBack;
  __doPostBack = function () {
   var args = arguments;
   doModal(function () {
    dp.apply(dp, args);
   });
  };
 }
 jQuery('input[type="submit"]').click(function (ev) {
  doModal(function () { });
 });
});

实际上不需要回调，抱歉:)

【讨论】：