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 before transitioning to that page.

When I click on a tab with many images, I display a spinner and starts downloading the images in the background then after it finishes I will display the page.

But I want to freeze any user inputs or taps while I'm doing this. So what is the best method to freeze and unfreeze the whole page?

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

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");