CODEWITHSUNDEEP
javascriptcssasp.nethtml
Arpita
Arpita

Reputation: 455

How to display Loading image Before Redirecting to another page?

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.

Here is my 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>

Any help would be greatly appreciated.

Thanks.

Upvotes: 3

Views: 9610

Answers (2)

Dennis R
Dennis R

Reputation: 3237

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>

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>

Or if you are open to using jquery plugin then refer my another post here on SO.

Upvotes: 2

Vytalyi
Vytalyi

Reputation: 1695

Try to put image wrapper outside the mainDiv container

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

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

Another issue is that you are attaching onclick event to Div1 which wasn't not declared yet. Try

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

Upvotes: 0

Related Questions