Как отключить прелоадер после загрузки страницы (скрипт в head)?

Question

[Mishcake]

Всем привет!

Есть скрипт прелоадера:

#hellopreloader>p {
    display: none;
  }

  #hellopreloader_preload {
    display: block;
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 1000px;
    background: #E67E22 url(http://hello-site.ru//main/images/preloads/tail-spin.svg) center center no-repeat;
    background-size: 41px;
  }

<div id="hellopreloader">
  <div id="hellopreloader_preload"></div>
</div>

let hellopreloader = document.getElementById('hellopreloader_preload');
function fadeOutnojquery(el) {
  el.style.opacity = 1;
  let interhellopreloader = setInterval(function () {
    el.style.opacity = el.style.opacity - 0.05;
    if (el.style.opacity <= 0.05) {
      clearInterval(interhellopreloader);
      hellopreloader.style.display = 'none';
    }
  }, 16);
}
window.onload = function () {
  setTimeout(function () {
    fadeOutnojquery(hellopreloader);
  }, 1000);
};

Я хочу разместить этот скрипт в head, чтобы лоадер покрутился, пока страница загружается, и потом он исчез. Но сейчас он запускается сразу и работает бесконечно.

Если добавить в конец body, то я вижу мигание страницы, потом запускается лоадер и выключается после загрузки.

Что я делаю не так, подскажите, пожалуйста.

Answer 1

[Виталий Першин]

На момент когда вызывается прелоадер, блока hellopreloader_preload еще нет в dom, подключить скрипт сразу после:

<div id="hellopreloader">
  <div id="hellopreloader_preload"></div>
</div>

Comments

[Mishcake]

В head код размещен в таком порядке:
- html-разметка
- стили
- подключаемый скрипт

Но это не помогло :(

P.S. Я понимаю, что в хед такие вещи не размещаются, но это единственный вариант в моем случае. Код размещаю на стороннем сервисе, который предоставляет возможность только в хэд вставить кастомный код.

[Mishcake]

Попробовал поменять местами стили и подключаемый скрипт, не помогло...

[Виталий Першин]

Mishcake, о какой html разметке в head вы говорите?

сам прелоадер должен находиться внутри body, чтобы скрипт смог его обнаружить, он должен быть запущен после того как --hellopreloader-- появится в dom иначе будет ошибка. Единственное что вам нужно сделать это сохранить порядок размещения, и не важно где он будет в конце body или в начале

[Mishcake]

Поигрался с расположением — да, через боди работает.

Но я вижу сначала частичную отрисовку страницы (контент), потом включается лоадер и потом он выключается.

Можно ли его как-то сразу показать, без первоначальной отрисовки страницы? Например, поместить скрипт в хедер и в нем же создавать нужные элементы на странице?

[Mishcake]

Да, создавая элементы с помощью скрипта в хэде, всё работает как надо на моем хосте. Но встраивая код в стороннюю СРМ - прелоадер тупо не появляется) Видимо, что-то блокирует. Спасибо за помощь.