как запустить javascript функцию после полной загрузки страницы — Q&A Хекслет
2026-02-26 19:57 Diff
https://ru.hexlet.io/qna/javascript/questions/kak-zapustit-javascript-funktsiyu-posle-polnoy-zagruzki-stranitsy

1. Использование события DOMContentLoaded

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

2. Использование события load

Если вам нужно дождаться загрузки всех ресурсов на странице (изображений, стилей, скриптов и т.д.), вы можете использовать событие load:

3. Помещение скрипта перед закрывающим тегом </body>

Еще один подход — разместить ваш скрипт внизу страницы перед закрывающим тегом </body>. Это гарантирует, что весь HTML-код будет загружен до выполнения вашего JavaScript:

4. Использование jQuery

Если вы используете jQuery, то можете воспользоваться методом $(document).ready(), который срабатывает, как только DOM готов:

Современные версии jQuery также поддерживают сокращённый синтаксис:

5. Использование современных подходов (ES6+)

Если вы используете современные функции JavaScript и хотите сделать код более чистым, можно использовать стрелочные функции вместе с методами событий:

Вывод

Выбор подхода зависит от ваших конкретных нужд:

  • Если вам важна скорость взаимодействия с DOM, используйте DOMContentLoaded.
  • Если вам нужно дождаться загрузки всех ресурсов, используйте событие load.
  • Если у вас есть доступ к jQuery, вы можете использовать $(document).ready(), но для новых проектов стоит рассмотреть чистый JavaScript.

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