When i click the button, it will be navigate to another page, before the page loading completely i want to show the loading gif image.(without using Ajax)
Loading image show when i click a button in jquery/javascript
14.2k Views Asked by user1225946 At
2
There are 2 best solutions below
0

This is what I did
1.) Set div tag over body and give it an ID of 'page'.
2.) After that, place a div tag next to the 'page' div tag and give it an ID of 'loading'.
<div id="page">
<body>
//whatever you page code is
</body>
</div><div id="loading"></div>
3.) Setup CSS.
<style type="text/css">
#page {display: block;}
#loading {display: none;
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
height: 100vh;
background-color: rgba(255, 255, 255, 0.5);
background-image: url('../Images/nameofgifimage.gif');
background-repeat: no-repeat;
background-position: center;}
</style>
4.) Finally, setup your JQuery. I am using VB.net so for the ID, I had to get the ClientID.
<script type='text/javascript' src="../Scripts/jquery-1.4.1.min.js"></script>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="../Scripts/jquery.maskedinput.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#<%= btnSearch.ClientID %>").click(function () {
$('#loading').show();
return true;
});
});
</script>
If this does not work for you, let me know and I will try to figure out what is wrong.
First right after the body tag add this:
Then add the style class for the div and image to your css:
And finally add this javascript to your page (preferably at the end of your page, before closing body tag of course):