How to preload the entire site with javascript?

Question

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 🙂