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...
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.
}
});
});
来源：https://stackoverflow.com/questions/7715192/blockui-on-dom-ready