Search code examples
jqueryjquery-mobile

Prevent user to perform any actions while page is loading

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?

Solution

  • 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.