Question

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!

Answer 1

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.