jquery how to show wait message during page load

Question

Being new to JQuery I have been hunting around to see how I can show a wait image to the user upon the loading of a page.

the page is simple, user lands on the page, and selects several values and then selects a submit button.

Submits the request to the back end and then the results are returned and then displayed. I am able to show a wait image upon the select button, but when the page is rendering the results using displaytag there is no image.

I tried the following:

<script type="text/javascript">

  $(document).ready(function() {
    $.blockUI({ message: '<h3><img src="../images/ajax-loader.gif" /> We are loading your request.  Please be patient.</h3>' });
  });

  $(window).load(function() {
    $.unblockUI();
  });  

</script>

But that did not seem to work. The image and message show up at the very end not during the rendering of the page.

Using IE if that matters.

Answer 1

I'm going to assume your sending an ajax request to the server? If so, you can utilize jQuery's ajaxStart and ajaxStop methods as described by this answer.

Answer 2

Using css:

#pageLoading { 
width:100%;
height: 100%;
background: black;
position:absolute;
z-index: 1000;
top: 0px;
left:0px;
}

You could create a 'mask' with your loading gif inside of it. Then use your jquery to fadeOut() the div when the page is loaded.

Answer 3

$(document).ready(function(){}) is called after the page is loaded / rendered. Go with superUntitled answer, use CSS and then fade it out after the page is loaded.

Answer 4

I have another way is the jquery ui, specificly the dialog widget for displaying a .gif picture with the modal: true option for blocking the interface . Then if the process finished you can simply destroy the dialog using $( this ).dialog( "close" ) method