Question

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

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

我的代码如下。

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

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

Answer 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();
});

Answer 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

Answer 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 () { });
 });
});

实际上并不需要回调，抱歉：）

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

3 个答案: