Geek Answers Handbook

Block the user interface until the page is fully loaded: jquery, blockUI plugin

How to block user interface when page is still loading using jquery and blockUI plugin? If the page was loaded using an AJAX call, I know a workaround, but when the page is loaded with postback, then how to block ui until the page is fully loaded?

Please, help. Thanks a lot in advance for your efforts and time.

+6
jquery blockui
source share
6 answers

You will need to run the blockUI plugin as soon as the body tag is displayed.

Instead of the traditional:

<script type="text/javascript"> $(function (){ $("body").blockUI(options); }); </script>

You need to forget about the attached $(function (){}) or $(document).ready(function (){}) so that your script works immediately:

 <script type="text/javascript"> $("body").blockUI(options); </script>
+7
source share

Build and fix Seb's answer. If you are blocking the user interface, use .blockUI (), and if .block () is used to target the object. I do not believe that you need to target the body, in fact, what the blockUI function does on itself. You need to call the function after the body tag ... otherwise there is no <body> . If you really want the user interface to be locked before each image is loaded, see the last line. If you want the contents of the page to load, you can put the unlock function at the bottom of your friend $(document).ready(function().

 <script type="text/javascript"> $("body").block(options); //--or-- $.blockUI(options); </script> <script type="text/javascript"> $(document).ready(function() { $(window).load(function() { $.unblockUI(); }); //load everything including images. //--or-- $.unblockUI(); //only make sure the document is full loaded, including scripts. }); </script>
+4
source share

You can try to launch a page with all components disabled, and then enable them in the PageLoad event. Another idea is a CSS class that hides the whole page and changes it to load using jQuery.

0
source share

The problem would be the link to javascript files.

If you need to add a blocking user interface to ASP.NET ASP.NET pages, try including javascript files in ScriptManager.

0
source share

Have you tried this?

 <script type="text/javascript"> $(document).ready(function () { $.blockUI(options); }); </script>
0
source share

The full code that finally worked for me is the following:

 $("body").block({ message: '<h2>Loading...</h2>' }); $(document).ready(function () { $("body").unblock(); });
0
source share

More articles:


All Articles