我有一张图片要加载。我正在使用 onclick 方法进行重定向,因此当有人点击一个 div 时,它会将他们带到另一个页面。当页面重定向到另一个页面时,我如何能够加载 loading.gif 图像。我真的很想使用它,因为它对用户更友好,而且我的页面加载通常需要大约 15 秒。我试过下面的代码,但它不起作用。
这是我的代码,
<div data-align="center" id="mainDiv" style="height:100%; background-image:url('images1/pattern1.png')">
<table id="login">
<tr>
<td align="right">
<span>UserName :</span>
</td>
<td>
<input type="text" id="txtUsername" runat="server"/>
</td>
</tr>
<tr>
<td align="right">
<span>Password :</span>
</td>
<td>
<input type="password" id="txtPassword" runat="server"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" class="LoginButton" value="Login" onclick="Login();"/>
</td>
</tr>
</table>
<span id="loading" style="visibility: hidden; text-align: center;">
<img src="images1/loading.gif" id="Img5" data-transition="slide" />
</span>
</div>
<script type="text/javascript">
function Login() {
document.getElementById("mainDiv").style.visibility = 'hidden';
document.getElementById("loading").style.visibility = 'visible';
location = "Default.aspx";
};
</script>
如有任何帮助,我们将不胜感激。
谢谢。
最佳答案
您可以通过 BeginRequestHandler
和 EndRequestHandler
事件很好地处理这个问题。当发生部分或全部回发时(在您的情况下单击按钮),您可以显示加载图像,当提供数据时,您可以在 EndRequestHandler
中隐藏加载图像。
<script type="text/javascript">
function pageLoad(sender, args) {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
}
function BeginRequestHandler(sender, args) {
document.getElementById("mainDiv").style.visibility = 'hidden';
document.getElementById("loading").style.visibility = 'visible';
}
function EndRequestHandler(sender, args) {
document.getElementById("mainDiv").style.visibility = 'visible';
document.getElementById("loading").style.visibility = 'hidden';
}
</script>
您的 HTML 标记如下所示
<div id="mainDiv">
...
...
</div>
<div id="loading" style="visibility: hidden;text-align: center;">
<img src="images1/loading.gif" id="Img5" data-transition="slide" />
</div>
或者,如果您愿意使用 jquery 插件,请引用我的另一篇文章 here在 SO 上。
关于javascript - 如何在重定向到另一个页面之前显示加载图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26635847/