Loading image show when i click a button in jquery/javascript

Question

Loading image show when i click a button in jquery/javascript

14.2k Views Asked by user1225946 At 19 October 2024 at 21:55

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)

Original Q&A

There are 2 best solutions below

**Ravimallya** · Answer 1

First right after the body tag add this:

<div id="loading">
    <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>

Then add the style class for the div and image to your css:

#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}

#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}

And finally add this javascript to your page (preferably at the end of your page, before closing body tag of course):

$(window).load(function() {
    $('#loading').hide();
});

**BMantle** · Answer 2

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.

Loading image show when i click a button in jquery/javascript

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in IMAGE-LOADING

Trending Questions

Popular # Hahtags

Popular Questions