Вебинары Разобраться в IT Реферальная программа
Программирование Аналитика Дизайн Маркетинг
ПРИХОДИТЕ УЧИТЬСЯ НОВОЙ ПРОФЕССИИ ЛЕТОМ СО СКИДКОЙ ДО 70% Забронировать скидку
06 Июл 2023
2 мин
83

Эквивалент jQuery $.ready() в чистом JavaScript

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

JavaScript является мощным инструментом для создания интерактивных веб-страниц, и одна из его ключевых особенностей — это возможность запускать код только после полной загрузки разметки страницы (DOM). Это особенно важно для скриптов, которые взаимодействуют с элементами на странице, например, устанавливают обработчики событий или изменяют содержимое.

В библиотеке jQuery для этого используется функция $.ready(). Пример ее использования выглядит так:

$(document).ready(function() {
    // Ваш код здесь
});

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

Первый и наиболее простой способ — это использовать событие window.onload. Оно срабатывает, когда вся страница, включая все зависимые ресурсы (такие как изображения и скрипты), полностью загружена:

window.onload = function() {
    // Ваш код здесь
};

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

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

document.addEventListener("DOMContentLoaded", function() {
    // Ваш код здесь
});

Этот способ является наиболее близким аналогом $.ready() из jQuery и работает во всех современных браузерах.

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

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

Добавить комментарий

Подарок
Забрать подарок