javascript - 如何在重定向到另一个页面之前显示加载图像？

Question

我有一张图片要加载。我正在使用 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>

如有任何帮助，我们将不胜感激。

谢谢。

Answer 1

您可以通过 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 上。