This is NOT a good idea. If you get that kind of behavior, then you didn’t properly code your carousel thing / CSS. You should hide the element that contains it, and reveal it in the js hook.
But if you really want to go your way, here’s how:
header.php:
...
<body <?php body_class('site-loading no-js'); ?>>
<script>
document.body.className = document.body.className.replace('no-js','has-js');
</script>
...
CSS:
body.site-loading.has-js{
background: #fff url('the/loading.gif') no-repeat center center;
}
body.site-loading.has-js *{
display:none;
}
javascript, assuming jQuery:
jQuery(document).ready(function($){
// do your carousel thing
// should be last line
$('body').removeClass('site-loading');
});
Needless to tell you that any javascript error after the header code I gave you, will keep your site in “loading” mode forever 🙂