[SOLVED] BlockUI on DOM Ready

BlockUI on DOM Ready

I'm using the jQuery BlockUI plugin to add a loading splash to a page that takes a few seconds to load due to CAML queries. The problem is, the page loads before then the BlockUI displays for a split second and disappears. It seems like JS is executing these in the wrong order and I cannot figure out why. Is there something I can change in the code or is BlockUI just not intended to be used without Ajax?

$(document).ready(function() {
    $.blockUI();
});
$(window).ready(function() {
    $.unblockUI();
});

In the html header I call jquery, blockui, and the common.js script that contain the CAML queries and load the page elements (in that order). The common.js script is also run on DOM ready, which I suspect may be part of the problem...

Solution

Try this:

<html>
    <head>
        <script src="jquery.js"></script>
        <script src="blockui.js"></script>
        <script type="text/javascript">
            $.blockUI();
        </script>
    </head>
    <body>
        …
    </body>
</html>

This should block the UI way before anything else has been loaded.

Edit: Okay, I've bothered to actually look it up … $.blockUI supports a callback function.

So, you could/should do this:

$(document).ready(function() {
    $.blockUI({
        onBlock: function() { 
            // Invoke your CAML stuff here.
        }
    });
});