CODEWITHSUNDEEP
jqueryjquery-mobile
Chinchan Zu
Chinchan Zu

Reputation: 918

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?

Upvotes: 10

Views: 37494

Answers (4)

Marco Peca
Marco Peca

Reputation: 81

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 :)

Upvotes: 0

ygssoni
ygssoni

Reputation: 7349

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.

Upvotes: 17

slobodans
slobodans

Reputation: 859

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

Upvotes: 2

Red Taz
Red Taz

Reputation: 4179

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.

Upvotes: 0

Related Questions