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

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>

任何帮助都将不胜感激。

谢谢。

- Arpita

---

你能否发布更多的HTML代码，这样我们就可以看到mainDiv。 - Pablo Matias Gomez

在您的页面上添加一个回调函数，使得当页面加载动画播放时立即出现，但一旦页面加载完成它就隐藏。 - James Lalor

你的代码对我有效。我在“location = Default.aspx”之前添加了一行“alert（“OK”）;”。当我点击按钮时，我看到屏幕上旋转的加载gif和我的“OK”消息。IE和Firefox都可以。 - mr_plum

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上的这里。

- Dennis R

---

它有效了。但是它显示在页面的左下角。我尝试设置边距和z-index，但它不会移动。 - Arpita

很高兴它能正常工作。您可以随时调整加载图像div的位置，这取决于您在页面中的布局方式。有一个类似父div的结构，并在其中显示所有子div <div> <div id="loading"> .... </div> <div id="mainDiv"> ... </div> </div>。 - Dennis R

非常感谢。我会处理加载图像的位置。 - Arpita

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
}

- Vytalyi

---

好的，还有一个问题...请尝试将您的“Div1.onclick”替换为“document.getElementById("mainDiv").onclick”。 - Vytalyi