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

【问题标题】：How to display Loading image Before Redirecting to another page?如何在重定向到另一个页面之前显示加载图像？
【发布时间】：2014-12-25 11:33:48
【问题描述】：

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

任何帮助将不胜感激。

谢谢。

【问题讨论】：

你能多发一点你的html，这样我们就可以看到mainDiv
在你的页面上添加一个回调，加载 gif 会立即播放，但一旦页面加载它就会隐藏它。
您的代码对我有用。我添加了行“警报（“OK”）；”就在“位置 = Default.aspx”之前。当我单击该按钮时，我看到一个正在加载的 gif 在屏幕上旋转以及我的“OK”消息。 IE 和 Firefox 都可以。

标签： javascript css asp.net html

【解决方案1】：

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

【讨论】：

好的，还有另一个问题....尝试用“document.getElementById("mainDiv").onclick”替换您的“Div1.onclick”

【解决方案2】：

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

【讨论】：

成功了。但它显示在页面的左下角。我尝试设置边距和 z-index，但它没有移动。
很高兴它有效。您可以随时调整加载图像 div 的位置，这取决于您在页面中的布局方式。有一个类似于父 div 的结构并在其中显示所有子 div <div> <div id="loading"> .... </div> <div id="mainDiv"> ... </div> </div>
非常感谢。我将处理加载图像的位置。