Как применить стиль к тегу сразу после его появления в DOM через js?

Question

[IliaMal]

Здравствуйте.

На сайте есть заглушка для скрытия блока с динамическим контентом.
Принцип простой: блок <div class="_pre-load-gradient"></div> перекрывает динамический блок, после полной загрузки HTML к блоку применяется display: none;

Этот метод работает, но проблема в том, что при отключенном js градиент останется висеть на блоке.
Что бы решить эту проблему решил по умолчанию сделать этот блок не видимым, если js работает делать его видимым, а после полной загрузке HTML опять скрывать.

Проблема в том, что если

document.querySelectorAll('._pre-load-gradient').forEach(e => {
    console.log(e);
    e.style.display = 'block';
});

разместить в самом верху страницы то ._pre-load-gradient еще нет в дом, а мне нужно применить стиль как можно быстрее, что бы пользователь не увидел его появление.

Тут надо в коллбек функцию поместить скрипт или есть еще какие решения?

Comments

[Kentavr16]

По поводу применения скрипта как можно быстрее - насколько я понял задачу вам помогут атрибуты async/defer для скрипта.

[Kentavr16]

В конкретно этом случае defer, который ждет готовую html страницу

Answer 1

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

Вы можете использовать document.write , данный метод вставляет текст или html разметку непосредственно во время чтения документ. В вашем случае если js отключен, то он не выполнится и ваш прелоад не появится вообще.

<script>
      document.write('<div class="_pre-load-gradient"></div>')
 </script>

Это самый быстрый способ вставки в документ средствами js

Answer 2

[Антон Неверов]

Вы что-то явно делаете не так в архитектуре изначально.
Принцип должен быть такой:
1) Если блок загружается сразу при загрузке страницы, тогда ваш прелоадер присутствует изначально на странице и имеет все необходимые стили (допустимо даже использовать inline стили в этом случае), чтобы перекрыть загружающуюся часть. Как только контент загрузился - прелоадер скрывается/удаляется из разметки.
2) Если блок начинает загружаться динамически по требованию пользователя, тогда перед загрузкой, вы помещаете прелоадер в нужно место и начинаете делать под ним загрузку. Когда контент будет загружен - прелоадер можно будет так же скрыть/удалить из разметки.

Если же у вас нет желания строить архитектуру правильно изначально, присмотритесь к MutationObserver