At the beginning of your loading script, just make your
visible through css [display:block;] and make the rest of the page invisible through css[display:none;].
Once the loading is done, just make the loading invisible and the page visible again with the same technique. You can use the document.getElementById() to select the divs you want to change the display.
Edit: Here's what it would sort of look like. When the body finishes loading, it will call the javascript function that will change the display values of the different elements. By default, your style would be to have the page not visible the loading visible.
<head>
<style>
#page{
display: none;
}
#loading{
display: block;
}
</style>
<script>
function myFunction()
{
document.getElementById("page").style.display = "block";
document.getElementById("loading").style.display = "none";
}
</script>
</head>
<body onload="myFunction()">
<div id="page">
</div>
<div id="loading">
</div>
</body>