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.

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.

• javascript
• css
• asp
• html

• Can you post a bit more of your html so we can see the mainDiv – Pablo Matias Gomez Commented Oct 29, 2014 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 Commented Oct 29, 2014 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 Commented Oct 29, 2014 at 17:23

2 Answers 2

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.

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
}