document.ready fires when the DOM is fully registered. If you have
large images in the document, document.ready doesn't wait for those to
completely load. So, it's typically earlier than window.onload, but it
isn't going to fire before you see stuff on the page.
I haven't tested this at all, and I'm just creating this in email, so
proceed with caution ... but you might want to consider putting
something like this in the <head>:
<script type="text/javascript">document.documentElement.className =
'js';</script>
and in your stylesheet do this:
#uiblocker {
display: none;
}
.js #uiblocker {
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
position: fixed;
cursor: wait;
z-index:1001;
}
and in your html, put this right after the opening <body> tag:
<div id="uiblocker"></div>
and in a javascript file, do this:
$(window).bind('load', function() {
$('#uiblocker').hide();
});
So, that /should/ work. For IE6 support, you'll need to either
simulate position: fixed with a css expression or change it to
position: absolute and hope for the best.
Hope that helps.
--Karl
____________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Oct 9, 2009, at 2:27 PM, sdtacoma wrote:
Hello,
I am using jQuery and BlockUI to display a "Loading..." message to the
user while the page is loading.
The problem is that the "Loading..." message seems to show up AFTER
the page has loaded, not during load. Shouldn't the document.ready
fire sooner than that?
What am I doing wrong?
<script>
$(document).ready(function() {
$.blockUI();
setTimeout($.unblockUI, 2000);
});
</script>
