Код JS работает неправильно

187

26 августа 2018, 20:30

Нужно чтобы при загрузке страницы автоматически вызывалась функция JS и элемент плавно становился "видимым", вот что мне здесь посоветовали:

HTML: Элемент по умолчанию Opacity 0, transition: 3s ease, id = ElementId

 <script>
 function nameFunc() {
  document.getElementById("ElementId").style.opacity = '1'; 
  }
 document.addEventListener("DOMContentLoaded", nameFunc);
  </script>

Элемент становится "видимым", НО НЕ плавно, а моментально - уже страница загружается с видимым элементом Opacity: 1. Но, если вызывать функцию вручную - всё работает хорошо, анимация работает. В чем проблема? Что я делаю не так?

Answer 1

Вероятно дело в том, что вы используете DOMContentLoaded.

Событие DOMContentLoaded происходит когда весь HTML был полностью загружен и пройден парсером, не дожидаясь окончания загрузки таблиц стилей, изображений и фреймов.

Попробуйте вместо этого использовать событие load
https://developer.mozilla.org/ru/docs/Web/Events/load