как запустить javascript функцию после полной загрузки страницы

год назад

Nikolai Gagarinov

Присоединяйтесь к нашему Telegram-сообществу

Ответы

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

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

document.addEventListener("DOMContentLoaded", function() {
    // Ваша функция здесь
    myFunction();
});

function myFunction() {
    console.log("Страница полностью загружена!");
}

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

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

window.addEventListener("load", function() {
    // Ваша функция здесь
    myFunction();
});

function myFunction() {
    console.log("Все ресурсы страницы полностью загружены!");
}

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

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

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример</title>
</head>
<body>
    <h1>Добро пожаловать!</h1>

    <script>
        function myFunction() {
            console.log("Страница загружена!");
        }
        myFunction();
    </script>
</body>
</html>

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

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

$(document).ready(function() {
    myFunction();
});

function myFunction() {
    console.log("Страница готова к взаимодействию!");
}

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

$(function() {
    myFunction();
});

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

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

document.addEventListener('DOMContentLoaded', () => {
    myFunction();
});

const myFunction = () => {
    console.log("Страница загружена с использованием стрелочной функции!");
};

Вывод

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

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

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

9 месяцев назад

Elena Gromova

10 месяцев

Фронтенд-разработчик

Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React

1 месяц

СИКП на JS

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

1 месяц

Асинхронное программирование на JS

Навык асинхронного программирования в JavaScript: писать быстрый код, расти в грейде и успешно проходить собеседования.

2 месяца

ООП на Javascript

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

8 месяцев

Автоматизатор тестирования на JavaScript

Git, JavaScript, Playwright, бэкенд-тесты, юнит-тесты, API-тесты, UI-тесты, Github Actions, HTTP/HTTPS, API, Docker, SQL

Похожие вопросы