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插件，请在SO上引用我的另一篇文章here。

Answer 2

尝试将图像包装器放在mainDiv容器之外

<div id="mainDiv">
   ...
</div>

<span id="loading" style="visibility: hidden; text-align: center;">
    <img src="images1/loading.gif" id="Img5" data-transition="slide" />
</span>

另一个问题是你将onclick事件附加到Div1，但尚未宣布。尝试

document.getElementById("mainDiv").onclick = function () {
   // your code
}

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

2 个答案: