Во-первых, чтобы скрыть сайт без стилей под простыней, ее надо раздвинуть на 100% по высоте и ширине.
Активировать его необходимо на чистом JS без CSS, т.к. стили должны загружаться после лоадера.
Тег .preloader должен добавляться строго в body. Чтобы прелоадер отображался по центру, также необходимо дать 100% высоты тегам html и body (и тоже через JS). Перехватить управление в JS после окончания парсинга html но до отображения странички можно так:
window.addEventListener('DOMContentLoaded', preloaderShow, false);
window.addEventListener('load', preloaderHide);
function preloaderShow() {
alert('Контента еще нет');
}
function preloaderHide() {
alert('Весь контент загружен');
}
Этот код должен быть объявлен в HEAD до всех остальных JS и CSS. И не в выделеном файле, а прямиком полностью в HEAD.
Да, и делайте прелодер ваш без jQuery, а то самый гигантский файл странички должен загрузиться до прелодера для его отображения. Маразм какой-то.
https://jsfiddle.net/q536qd70/
Даже накидал вам почти весь код прелодера.
