在页面加载时显示加载进度图像（未提交事件）

Question

I need to display loading GIF image while page is loading or during postbacks using jQuery and JavaScript for long running tasks or processes which require significant amount of time to execute. 对于需要长时间运行的任务或进程，我需要在页面加载期间或使用jQuery和JavaScript回发期间显示加载的GIF图像。

I tried this solution, I don't have error but the loading not show. 我尝试了此解决方案，但没有错误，但加载未显示。

My code below. 我的代码如下。

I would greatly appreciate any help you can give me in working this problem. 我将非常感谢您在解决此问题方面可以给我的任何帮助。

.cs .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 .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>

Answer 1

use ajaxStart() and ajaxStop() 使用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();
});

Answer 2

Have a look at the fiddler 看看提琴手

http://jsfiddle.net/VpDUG/4952/ 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;
}

here is the nice explanation..you will love it. 这是一个很好的解释..你会喜欢的。

How can I create a "Please Wait, Loading..." animation using jQuery? 如何使用jQuery创建“请稍候，正在加载...”动画？

I tried it, its working super. 我尝试了，它的工作超级。

Thanks to @Jonathan Sampson 感谢@Jonathan Sampson

Answer 3

Some tweak for basic submit or ASP.NET post back. 对基本提交或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 () { });
 });
});

The callback is not really needed, sorry :) 回调不是真正需要的，对不起:)

在页面加载时显示加载进度图像（未提交事件）

问题描述

3 个解决方案

解决方案1
0 2014-03-26 13:27:06

解决方案2
0 2014-03-26 13:49:41

解决方案3
0 2014-05-05 13:56:27

在页面加载时显示加载进度图像（未提交事件）

问题描述

3 个解决方案

解决方案1 0 2014-03-26 13:27:06

解决方案2 0 2014-03-26 13:49:41

解决方案3 0 2014-05-05 13:56:27

解决方案1
0 2014-03-26 13:27:06

解决方案2
0 2014-03-26 13:49:41

解决方案3
0 2014-05-05 13:56:27