如何显示导入图像重定向到另一个页面之前？ [英] How to display Loading image Before Redirecting to another page?

问题描述

我对加载的图像。我使用的onclick方法来使重定向当有人点击一个div，它需要到另一个页面。我怎么能够同时在页面重定向到另一个加载loading.gif形象。我真的想用这个，因为这将更加用户友好的和我的页面加载通常需要约15秒。我已经试过低于code，但它不工作。

I have an image for loading. I am using onclick method to redirect so when somebody click on a div, it takes them to another page. How would i be able to load a loading.gif image while the the page is redirecting to the another one. I would really like to use this as this would be more user friendly and my page that is loading usually takes about 15 seconds. I've tried the below code but it is not working.

下面是我的code，

<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>

任何帮助将大大AP preciated。

Any help would be greatly appreciated.

感谢。

推荐答案

您很可能通过 BeginRequestHandler 和 EndRequestHandler 事件。当部分或全部回发时（在按一下按钮你的情况），则可以显示加载图像和数据时服了你可以隐藏在加载图像的 EndRequestHandler

You could very well handle this through the BeginRequestHandler and EndRequestHandler events. When a partial or full postback occurs (upon button click in your case) you can show the loading image and when the data is served you can hide the loading image in the the 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标记会像下面

Your HTML markup will be like below

<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插件，那么请参考我的另一篇文章<一个href=\"http://stackoverflow.com/questions/25433333/asp-net-display-loading-image-every-time-$c$c-executes/25433679#25433679\">here在左右。

这篇关于如何显示导入图像重定向到另一个页面之前？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！