How to add loader while page load

How to add loader while page load
Some time page is taking time to load, Generally this happened because adding lots of big images or lots of logic behind the page. Then some time user may not understood this, So better way is add loading image or put some text on page so user can easily understood something is loading behind the page.

I will explain you how to add loading image with jQery.

Step1. First we need to take image on page, For this we can choose two way
1. Add div tag add set loading image to background using css
2. Add image tag directly.

e.g <div class="loader"></div>

Step2: Add some CSS to show loader image in div

.loader {
      position: absolute;
   margin: 0 auto;
   z-index: 9999;
   background: url('icon-loader.gif') no-repeat;
      top: 50 px;

   cursor: wait;

}

This css will keep loading image to middle, But if you want lo do something liek gmail or google, then you can make position to fixed and set left to 0 and set background color to yellow.

Step 3 - For displaying some effect we can go through jQuery. In jQuery implement page load event and use fadeout function.

e.g

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
        $(window).load(function(){
            $('div.loading').fadeOut(1000);
        });
</script>

If you want to submit form and page and then after click on some action page will take time to load then we can use same code for that also. But for that you need to create a function  with fadeout statement, And call this function after calling your action or submit page.