在开发Web应用程序时，经常会遇到一些需要在页面加载时执行的耗时操作。直接在页面加载时执行这些操作会导致用户看到空白屏幕，这并不是一个好的用户体验。本文将介绍两种方法，通过在页面加载时显示加载信息或动画，来提升用户体验。
在这种方法中，不直接调用目标页面。而是先调用一个包含加载信息的HTML页面，然后通过JavaScript立即调用目标页面。
点击按钮时，会调用一个JavaScript函数，该函数将用户重定向到“加载”页面。
<input id="btnLoad" type="button" value="加载页面" onclick="LoadPage()" />
JavaScript函数如下：
<script type="text/javascript">
function LoadPage() {
var loadPageURL = 'Loading.html';
window.location = loadPageURL;
return false;
}
</script>
在“加载”页面的body中，添加一个页面加载时调用的函数。页面内容仅包含一个GIF图像，并添加任何希望提供给用户的信息。
<body onload="Redirect()">
<script type="text/javascript">
function Redirect() {
window.location = 'SlowPage.aspx';
}
</script>
</body>
第二种方法稍微复杂一些。不使用重定向。这里使用的技术是将页面加载期间要执行的操作移动到按钮点击事件（一个隐藏按钮的点击事件），而页面加载本身不包含任何内容。因此页面加载速度很快。页面HTML内容中有一个加载信息，显示出来。然后使用延迟的JavaScript调用，触发一个回发（按钮点击事件）。在那里，将执行原本打算在页面加载时执行的所有操作。
页面加载时，调用一个JavaScript函数。
<body onload="PageLoad()">
调用的JavaScript函数触发一个延迟的按钮点击事件（使用setTimeout）：
<script type="text/javascript">
var _isInitialLoad = true;
function PageLoad() {
if (_isInitialLoad) {
if (document.getElementById('hdnLoaded').value) {
_isInitialLoad = false;
setTimeout('__doPostBack(\'' + this.btnPageLoad.ClientID + '\', \'\')', 100);
}
}
}
</script>
隐藏按钮用于执行所有页面加载事件，隐藏文本框用于告诉页面加载操作是否完成。
<asp:Button ID="btnPageLoad" runat="server" Text="页面加载" 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 />
<span style="font-size: 10pt; font-family: Verdana">
[请稍候，页面正在加载...]
</span>
<br />
<img src="Images/ajax-loader.gif" alt="加载中..." />
<br />
</div>
服务器端代码如下。所有页面加载操作（或至少是耗时的独立操作）都移动到按钮点击事件中。
protected void btnPageLoad_Click(object sender, EventArgs e)
{
// 一些耗时操作
hdnLoaded.Value = "true";
divLoading.Visible = false; // 使加载信息不可见
}
以上就是本文的全部内容。当需要这种功能时，花了一些时间才找到帮助。所以这里分享给大家，希望对某人有所帮助。