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

Доброго времени суток! Когда создаю 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');
  });
  • Вопрос задан
  • 1563 просмотра
Решения вопроса 1
dummyman
@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/

Даже накидал вам почти весь код прелодера.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы