65.9K
CodeProject 正在变化。 阅读更多。
Home

页面加载时的加载消息

Vasanth.S.R
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.87/5 (44投票s)

2009年2月24日

CPOL

2分钟阅读

viewsIcon

178496

downloadIcon

4996

当 page_load 中的函数需要很长时间时，显示加载消息（或 GIF）。

引言

很多时候，Web 开发者会遇到在 Page_Load 事件中需要执行大量耗时操作的情况，而我们显然不希望最终用户看到一个纯白色的屏幕。一个“正在加载..”的消息或加载 GIF 会更友好。本文介绍了如何显示这样的消息。

Using the Code

完整的示例网站可以从 这里 下载。

使用 .Net IDE 打开网站：打开->网站->文件系统->（下载并解压缩的文件夹）。

代码

加载消息可以通过两种不同的方式显示。让我们看看这两种方式。

方法 1

这里目标页面不是直接调用的。而是调用一个包含加载消息的 HTML 页面，该页面会立即调用目标页面（通过 JavaScript）。

单击按钮时，将调用一个 JavaScript 函数，该函数会将用户重定向到“加载”HTML 页面。

<input id="btnLoad" type="button" value="Load Page" onclick="LoadPage()" />

JavaScript 函数

<script type="text/javascript">
function LoadPage()
{
    var loadPageURL = '\Loading.html'; //Intermediate page with "Loading" message 
    window.location = loadPageURL;
    return false;
} 
</script>

在“加载”页面的 body 中，我们添加一个在页面加载时调用的函数。
页面内容只包含一个 GIF 图像。添加您想向用户提供的任何信息。

 <body onload="Redirect()">

页面加载时，将调用此 JavaScript，它会立即重定向到实际页面。但是，此页面的内容将在其他页面完全加载之前显示在浏览器中。

<script type="text/javascript">
function Redirect()
{
  window.location = '\SlowPage.aspx'; // Redirect immediately to the actual page
}
</script>

方法 2

第二种方法稍微复杂一些。我们不使用重定向。这里使用的技术是将 page_load 期间执行的操作移动到 button_click 事件（隐藏按钮的事件），并且页面加载不包含任何内容。因此，页面加载速度很快。页面 HTML 内容中放置了一个加载消息，显示出来。然后，使用延迟的 JavaScript 调用，我们触发一个回发（按钮单击事件）。在那里，我们将执行所有实际打算在 page_load 中执行的操作。

在页面加载时，我们调用一个 JavaScript 函数。

<body onload="PageLoad()">

被调用的 JavaScript 函数会触发延迟的按钮单击事件（使用 setTimeout）。

<script type="text/javascript">
var _isInitialLoad = true;
function PageLoad()
{
  if(_isInitialLoad)
  {
    //Check to make sure the page load doesn't gets called over and over
    if (document.getElementById('hdnLoaded').value)  
    {
       _isInitialLoad = false;
       
       //Triggering a postback after 100 milliseconds 
       setTimeout('__doPostBack(\'<%= this.btnPageLoad.ClientID % > \' , \' \' );' ,100);
    }
  }
}
</script>

隐藏按钮，在其单击事件中执行所有页面加载事件，以及隐藏文本框，用于告诉我们页面加载操作是否完成。

<asp:Button ID="btnPageLoad" runat="server" Text="Page Load" 
	OnClick="btnPageLoad_Click"
 Style="display: none" UseSubmitBehavior="false" /> 

<input type="hidden" id="hdnLoaded" runat="server"/>

“正在加载”消息。（分组在 div 标签中。）

<div id="divLoading" runat="server" style="text-align: center">
   <br /><br /><br /><br /> 
   <span style="font-size: 10pt; font-family: Verdana">
                [Please wait while the page is loading...]
   </span>
   <br />
   <img src="Images/ajax-loader.gif" alt="Loading..." /><br />
</div>

服务器端代码如下所示。所有页面加载操作（或至少是耗时且独立的的操作）都移动到按钮单击事件。

protected void btnPageLoad_Click(object sender, EventArgs e)
{
  //Some operation that takes long time

  //Setting a hidden variable will help avoiding a loop of 
  //postback triggered from client side script.
  hdnLoaded.Value = "true";
  divLoading.Visible = false; // Make the loading message invisible
}

就这样。我花了一段时间才找到我需要这种东西的帮助。所以这里有一个给其他人。希望这能帮助到某人。

这是我在 The Code Project 上的第一篇文章。欢迎提出任何改进意见。

历史

  • 2009 年 2 月 24 日：初始发布
© . All rights reserved.