Как сделать нормально работающий preloader к сайту, чтобы после полной загрузки страницы все нормально скрывалось?

Question

[kKlkpdpjLL]

Вот мои наработки..Может что-то не правильно?
Скрипт
$(window).on('load', function () {
var $preloader = $('#page-preloader'),
$spinner = $preloader.find('.spinner');
$spinner.fadeOut();
$preloader.delay(350).fadeOut('slow');
});

CSS
#page-preloader {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1001;
}

#page-preloader .spinner {
position: absolute;
background: #404040 url("media/images/load.svg") center center no-repeat;
z-index: 1000;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-width: 320px;
background-size:100px;
}

HTML

Answer 1

[Сергей Тряпкин]

Выложите пожалуйста код HTML.
Так же неплохо было бы получить ссылку где это все вертится.

Я так понимаю вы делаете все по данной инструкции: ?
_popel-studio.com/blog/article/preloader-saita-svoi...

Если да, то должно все работать, ищите проблемы в коде.

Comments

[kKlkpdpjLL]

Все заработало, нашел ошибку.
У меня еще вопрос. Как сделать так чтобы во время всей этой анимации предзагрузки анимация самой странички не начинала работать, и только тогда, когда прелоадер скроется анимация начиналась.

[Сергей Тряпкин]

Анимация у Вас через JS\jQuery?
Если да, то вынесите анимацию в отдельную функцию и запускайте эту функцию после <$preloader.delay(350).fadeOut('slow');>.

Так же можно попробовать подключить js(с анимацией) файлов в footer сайта, а скрипт прелодера грузите в начале страницы.

Тут можно почитать про очередность скриптов js:
_https://learn.javascript.ru/external-script