How to display Loading image Before Redirecting to another page?

Question

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.

Can you post a bit more of your html so we can see the mainDiv — Pablo Matias Gomez, Oct 29 '14 at 16:33
Add a callback on your pages that, immediately the loading gif plays, but once the page has loaded it hides it. — James Lalor, Oct 29 '14 at 16:35
Your code is working for me. I added the line "alert("OK");" right before "location = Default.aspx". When I click the button I see a loading gif spinning on the screen and my "OK" message. IE and Firefox OK. — mr_plum, Oct 29 '14 at 17:23

score 2 · Accepted Answer · edited May 23 '17 at 10:26

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.

It worked. But it is displayed at the bottom left corner of the page. I tried setting margin and z-index but it does not move. — Arpita, Oct 29 '14 at 18:20
Glad it works. You can always adjust the position of the loading image div, it depends on how you have laid out in the page. Have a structure something like a parent div and display all the child divs in there `

....

...

` — Dennis R, Oct 29 '14 at 18:23
Thank you very much. I will work on the position of the loading image. — Arpita, Oct 29 '14 at 18:27

Vytalyi · Answer 2 · 2014-10-29T17:00:36.710

0

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
}

edited Oct 29 '14 at 17:00

answered Oct 29 '14 at 16:40

Vytalyi

1,637
3
20
33

Ok there is another issue.... try to replace your "Div1.onclick" with "document.getElementById("mainDiv").onclick" – Vytalyi Oct 29 '14 at 16:57

How to display Loading image Before Redirecting to another page?

2 Answers2

Linked