Как разместить прелоадер на сайте?

Question

[lumb]

Взял к примеру такой прелоадер https://codepen.io/Mattykins/pen/wfJqk

Поставил скрипт

/* Preloader */ 
$(window).load(function() {
    $(".demo").delay(100).fadeOut().remove();    

});

В тег body засунул

<div class='demo'>
  <div class='circle'>
    <div class='inner'></div>
  </div>
  <div class='circle'>
    <div class='inner'></div>
  </div>
  <div class='circle'>
    <div class='inner'></div>
  </div>
  <div class='circle'>
    <div class='inner'></div>
  </div>
  <div class='circle'>
    <div class='inner'></div>
  </div>
</div>

как итог прелоадер вечен) Никогда не ставил прелоадеры и не до конца понимаю как работает. Особенно смущает наличие тега body в css у меня на сайте уже свой прописан. Инфа везде одинаковая и примеры тоже, объясните что куда? (если что сайт на bootstrap 4 - может там свои скрипты есть для loadera)

Comments

[shmatuan]

Хм, если вставить js в прелоад из codepen, то всё работает.
В консоли есть ошибки?
js файл подключён?

Особенно смущает наличие тега body в css

Он там только цвет меняет

[lumb]

Вопрос в том, что в css прелоадера есть тег body и он похоже пересекаются с моим. Остаться должен только один. Как их соединить\переписать?

[shmatuan]

lumb, Убрать с прелоадера

body, html {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  background: linear-gradient(90deg, #00b377, #00d68f);
  box-shadow: inset 0px 0px 90px rgba(0, 0, 0, 0.5);
  margin: 0px;
  padding: 0px;
}

Этот код просто убирает все отступы(что правильно) и делает градиент
В идеале просто заменить body на свой тег class="preloader" и выключать его
$(".preloader").delay(100).fadeOut().remove();

[lumb]

Пока ничего не выходит, при загрузке контент сайта и прелоадера идут вместе, потом фон прелоадера исчезает, а круг остается

Answer 1

[Kappy]

delay не работает для удаления классов, используйте setTimeout
https://codepen.io/anon/pen/ZmrNNa

setTimeout(function() {
    $(".main").remove()
}, 1000);

Comments

[lumb]

Исчез только круг, а по идее прелоадер это и фон тоже, который перекрывает реальный контент на время загрузки.

[Kappy]

Внимательно смотрите, что исчезает, иначе далеко не уедете .
https://codepen.io/anon/pen/vQdPeN

[lumb]

Николай Капитанов, мне далеко и не надо.
На реальном сайте прелоадер исчез, уже прогресс. Правда вместе с ним и весь контент, остался только бэкграунд

[lumb]

Николай Капитанов, скрипт вырезает все дивы на сайте, а не только тот, что с id
Добавить в конце PAPAM увидите

[Kappy]

lumb, Я думал сами догадаетесь, сделал готовую версию

[lumb]

Николай Капитанов, не увидел разницы, как выразался div так и вырезается https://codepen.io/lumb/pen/VVQOqR

[Kappy]

lumb, исправил https://codepen.io/anon/pen/ZmrNNa

[lumb]

Николай Капитанов, так работает.
То есть просто по таймауту убирается слой? и всё? Я думал существуют способы реально отслеживать загрузку страницы и тогда уже её показывать...

[Kappy]

lumb, вы скинули прелоадер с задержкой, но неправильной. Есть методы , исправил и скинул. P.S уточняйте, что хотите.

[lumb]

Николай Капитанов, странно работает, не ждет загрузки изображений, прописанных в css

[lumb]

Николай Капитанов, в идеале как-то дополнительно проверять загрузку одного указанного вручную изображения

[Kappy]

lumb,

$(function() {
   $('.main').remove()
});

[Kappy]

lumb, Исправил, гляньте https://codepen.io/anon/pen/ZmrNNa

[Kappy]

lumb, можно так :

function myImageFunction(){
$('main').remove();
}

И вешайте функцию на изображение как onload = "myImageFunction()"

[lumb]

Николай Капитанов, идея хорошая, только изображение грузится, как backgroud в css. На него вряд ли что-то навесить.

function myImageFunction(){
$('main').remove();
}

ничего не поменяло

[lumb]

Затупил, повесил эту функцию на body и все заработало

Answer 2

[lumb]

Добавление к вопросу, почему bootstrap css искажает результат?
https://codepen.io/lumb/pen/PxOBPK - без bootstrap css
https://codepen.io/lumb/pen/JepqVm - с bootstrap css

Comments

[Kappy]

box-sizing:unset!important;
https://codepen.io/anon/pen/KrQjOG