Javascript 如何在重定向到其他页面之前显示正在加载的图像？

我有一个图像加载。我使用onclick方法重定向，所以当有人单击一个div时，它会将他们带到另一个页面。当页面重定向到另一个图像时，如何加载加载.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>

用户名：
密码：
函数登录（）{
document.getElementById（“mainDiv”）.style.visibility='hidden'；
document.getElementById（“加载”）.style.visibility='visible'；
location=“Default.aspx”；
};

任何帮助都将不胜感激

---

谢谢。

尝试将图像包装器放在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>

---

您可以通过

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>

函数页面加载（发送方，参数）{
var prm=Sys.WebForms.PageRequestManager.getInstance（）；
prm.add_beginRequest（BeginRequestHandler）；
prm.add_endRequest（EndRequestHandler）；
}
函数BeginRequestHandler（发送方，参数）{
document.getElementById（“mainDiv”）.style.visibility='hidden'；
document.getElementById（“加载”）.style.visibility='visible'；
}
函数EndRequestHandler（发送方，参数）{
document.getElementById（“mainDiv”）.style.visibility='visible'；
document.getElementById（“加载”）.style.visibility='hidden'；
}

您的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上的另一篇文章。

你可以发布更多的html，这样我们就可以看到maindiv在你的页面上添加回调，加载的gif会立即播放，但一旦页面加载，它就会隐藏。你的代码对我有用。我在“location=Default.aspx”之前添加了一行“alert（“OK”）；”。当我点击这个按钮时，我看到一个正在加载的gif在屏幕上旋转，还有我的“OK”信息。IE和Firefox好的。好的，还有一个问题。。。。尝试将“Div1.onclick”替换为“document.getElementById（“mainDiv”）.onclick”，这样就行了。但它显示在页面的左下角。我试着设置保证金和z指数，但它不动。很高兴它能起作用。您可以随时调整加载图像div的位置，这取决于您在页面中的布局方式。有一个类似于父div的结构，并在其中显示所有子div

非常感谢。我将在加载图像的位置上工作。
<div id="mainDiv">
    ...
    ...
</div>

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