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

Question

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.

Answer 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>

Answer 2

You can try start the page with all components disabled and then enable their on the PageLoad event. Other idea is put a CSS class that hide all the page and change this on the load with JQuery.

Answer 3

this code somehow doesnt seem to work .. i tried and it doesnt load blockUI at start..

Answer 4

Problem would be in refering the javascript files.

If block UI needs to be added in the ASP.NET Ajax pages try including the javascript files in the ScriptManager.

Answer 5

Have you tried this?

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

Answer 6

It does not work