页面加载时显示加载进度图像(不是提交事件)

本文关键字：加载 提交 事件 显示 图像 | 更新日期: 2023-09-27 17:53:27

我需要在页面加载或回发期间使用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(); 
}

是

<%@ 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>

页面加载时显示加载进度图像(不是提交事件)

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

看看小提琴手

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;
}

这是一个很好的解释，你会喜欢的。

如何创建"请等待，正在加载中"&;动画使用jQuery?

我试过了，效果很好。

感谢@Jonathan Sampson

对基本提交或ASP的一些调整。. NET post back.

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

回调不是真的需要，抱歉:)

相关文章：