Q:

How to continue to show a please wait page during a page reload using jQuery?

I'm using jQuery 1.6.2 and I have to disable all elements on a page with forms, selects, and links while displaying a please wait animation.  
I found a free animation at Ajaxload and was using $('.gif').show(); to display it, waiting until some javascript functions complete and then calling $('.gif').hide(); 
However, I ran into something I wasn't expecting.  When the user selects a new item in the dropdown the loading gif animation displays, but shortly thereafter, in a nested javascript functions associated with the dropdown, it calls for a page refresh with new data from a database call and removes my animation before I can call the hide function.  
So my question is, is it possible to display an animation that will display in the jsp and then continue until the reload is complete?
I was using something like this to disable the link click events:
 $("a").click(function(event) {
   // add some conditional logic here if animation is running then
    event.preventDefault(); ...

So, is there a better way to globally disable all the elements on the page, preventing a click event or a change event on the select dropdown?
Aftermath:
I used the suggestion of Archer for the background div, the answer from Jai, along with this blog article: jQuery page loading delay, this article on using a modal window with an animation and came up with a custom solution that fit exactly what I needed.  
Thanks for the help from everyone, it's greatly appreciated!

A:

May be using doc ready and window load together this way:
$(function(){
   $('.gif').show();
   $(window).load(function(){
      $('.gif').hide();
      $('#wrapper').show();
   });
});

initially the wrapper div needs to be hidden, when window fully gets loaded show the wrapper and hide the gif.

