Примерно следующим образом.
В самом начале скрываем допустим основной контент, который находится во враппере, ну к примеру задав прозрачность 0
#wrapper {
opacity: 0;
}
#main_preload{
position: fixed;
width: 64px;
height: 64px;
left: 50%;
}
В разметке делаем страницу, которая будет отображаться пока идет загрузка, но мне проще ориентироваться будет на прелоадер (как то привычнее, но смысл реализации будет тем же). Поэтому сделаем пустой див
#main_preload
Вообще разметка примерно следующего типа:
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<span id="main_preload"></span>
<div id="wrapper">
<!-- content -->
</div>
<script type="text/javascript" src="path/to/loader.js"></script>
</body>
</html>
Делаем скрипт loader.js, примерный код дернул со старого своего проекта (поэтому полностью на код ориентироваться не стоит), прелоадер (gif) будет крутится в центре экрана, пока не загрузится основной контент:
var preload = $("#main_preload"),
w = $(window).width() / 2 - 30,
h = $(window).height() / 2 - 30;
preload.html('<img src="/path/to/preload.gif" alt="load content."/>');
preload.css({"top": h + 'px', "left": w + 'px'});
$(window).load(function () {
setTimeout(function () {
preload.animate({opacity: "0"}, 50, function () {
preload.html("")
});
$("#wrapper").animate({opacity: "1"}, 50)
}, 250)
});
Суть в использовании $(window).load( ); setTimeout тут не помню уже зачем, вроде для какой то красивой задержки, но эта задержка не имеет ничего общего с основной загрузкой. Там плавный переход получается такой: прелоадер крутится, пока
весь контент не будет загружен (и картинки и тд), потом идет плавное затухание прелоадера на прозрачность 0 и одновременное появление основного контента (прозрачность 1).
https://jsfiddle.net/sm2yfbxj/ 
Простой
Простой
