Block UI until a page has fully loaded : jquery, blockUI plugin

jquery blockui

30,477

Solution 1

You'll need to fire the blockUI plugin as soon as the body tag is output.

Instead of the traditional:

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

You'll need to forget about the enclosing $(function (){}) or $(document).ready(function (){}) so your script fires immediately:

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

Solution 2

Building on and correcting Seb's answer. If you are blocking the UI use .blockUI() and if targeting an object use .block(). I don't believe you need to target body, essentially that's what the function blockUI does on it's own. You DO need to call the function after the body tag... otherwise there is no <body> tag. If you really want to keep the UI blocked until every image is loaded, see the last line. If you only wanted the page content to load you could put the unblock function at the bottom of your familiar $(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>

30,477

Author by

Admin

Updated on July 22, 2022

Comments

Admin almost 2 years

How can I block the UI when the page is still loading using jquery and blockUI plugin? If the page was being loaded using an AJAX call I know the workaround, but when the page is loading with a postback, then how to block the ui until the page has finished loading completely?

Please help. Many thanks in advance for your effort and time.
RAJ over 11 years

I am trying to block table row, but I am unable to do in this way, my code: $('#required-tr').block({message: null}); It blocks whole page
Kremena Lalova almost 9 years

this works but blocks all the form elements once the page is unblocked
Kremena Lalova almost 9 years

The proper method is block(options)