Prevent user to perform any actions while page is loading

Question

I have a tabbed web application, and I also created caching of the images before page transitions, so when the user goes to a page, I make sure all the images are downloaded

Answer 1

You can use a predefined jQuery UI called jQuery Block UI

Or simply add a division that will block the body and will fade out when the body is loaded.

<div id="div">
    <h1>Please Wait..</h1>
</div>

jQuery will be:

$(document).ready(function(){
    $("#div").fadeOut()
  });

Here is the working Example. The page will be blocked until the image is loaded completely.

Answer 2

I use:

$(window).bind('load', function() {
    // code here
});

Until the page is not completely loaded this event is not fired. So, there, you can call a function that unlock your page's elements.

Enjoy :)

Answer 3

Covering the interface with a top-level transparent/translucent overlay should block events for elements beneath it.

However, you would be taking UI control away from the user by doing this.

Answer 4

This JQuery code can disable elements on page:

$("body").find("*").attr("disabled", "disabled");
$("body").find("a").click(function (e) { e.preventDefault(); });

And this JQuery code will make elements enabled again:

$("body").find("*").removeAttr("disabled");
$("body").find("a").unbind("click");