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

我需要显示加载页面时加载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>

来源

2014-03-26 Hamamelis

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

来源

2014-03-26 13:27:06

请任何教程？ – Hamamelis

http://www.w3schools.com/jquery/ajax_ajaxstop.asp –

http://www.tutorialspoint.com/jquery/ajaxstop.htm这一个解释很好 –

在提琴手

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

这里是不错的explanation..you一定会喜欢它看一看。

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

我试了一下，它的工作超。

由于@Jonathan桑普森

来源

2014-03-26 13:49:41 codebot

对不起但在我的情况下，你的代码不工作。 – Hamamelis

一些的调整基本提交或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() { }); 
}); 
});

是不是真的需要回调，不好意思:)

来源

2014-05-05 13:56:27 GBrian

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

回答

相关问题