Почему не корректно работает прелоадер?

Question

[Игорь Мясников]

Доброго времени суток! Когда создаю preloader, он работает, но перед его появлением успевает показаться сайт без стилей, в чем может быть ошибка?
html:

<div class="preloader">
      <div class="animation"></div>

css:

.preloader
		position: fixed
		left: 0
		right: 0
		top: 0
		bottom: 0
		z-index: 100500
		background-color: #000
		.animation
			position: relative
			left: 50%
			top: 50vh
			margin:
				left: -40px
				top: -40px

Js:

$(window).on('load',function() {
    $('.preloader').delay(1000).fadeOut('slow');
  });

Comments

[Артур Карапетян]

Друг, у меня та же фигня

[Артур Карапетян]

А еще он сначала не в середине, а где-то в стороне

Answer 1

[dummyman]

Во-первых, чтобы скрыть сайт без стилей под простыней, ее надо раздвинуть на 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/

Даже накидал вам почти весь код прелодера.

Comments

[Артур Карапетян]

Спасибо, друг!

[Артур Карапетян]

А как еще туда добавить div с классом pulse ?! Не сочтите за наглость просто я дуб дубом в JS

[Игорь Мясников]

Ну если делать - то делать правильно. Спс за ответ пойду разбираться

[dummyman]

Артур: Ну смотри.

Создать div:
var newDiv = document.createElement('div');

добавить класс:
newDiv.classList.add('pulse');

Вставить div в элемент на странице:

document.querySelector('.preloader').appendChild(newDiv);

[Артур Карапетян]

dummyman: Спасибо!