jquery, hide content until loaded

I actually wouldn't use CSS to start with and here's why. If for some reason JS fails to load on the page, it will also fail to actually show the content of your page as well. I'd keep everything in the script and write to the DOM, so if it fails, nothing happens.

<script>
document.write('<style>body { visibility: hidden; } </style>');
</script>

<script type="text/javascript">
jQuery(document).ready(function(){
    delay();
});

function delay() {
    var secs = 1000;
    setTimeout('initFadeIn()', secs);
}

function initFadeIn() {
    jQuery("body").css("visibility","visible");
    jQuery("body").css("display","none");
    jQuery("body").fadeIn(1200);
}
</script>

Use CSS to hide the element by default and then show it when you like to.

CSS

body {
  display: none;
}

jQuery

$(window).load(function() {
  // When the page has loaded
  $("body").fadeIn(2000);
});

The load event is sent to an element when it and all sub-elements have been completely loaded.

See the load event.

You might also consider to replace your "fadeX" classes with a single class, something like "fade"