Как реализовать аналог $(document).ready на чистом javascript?

Пользователь

от willis.streich , в категории: JavaScript , 2 года назад

Как реализовать аналог $(document).ready на чистом javascript?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от caterina , 2 года назад

@willis.streich 

Чтобы реализовать аналог $(document).ready на чистом javascript, нужно использовать событие DOMContentLoaded. Вы можете использовать следующий код:

1
2
3
document.addEventListener("DOMContentLoaded", function(event) {
  // код, который будет выполнен, когда DOM будет загружен
});


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

Пользователь

от terrence , 8 месяцев назад

@willis.streich 

Альтернативный способ реализации аналога $(document).ready() на чистом JavaScript - использовать событие window.onload. Это событие происходит когда вся страница загружена, включая стили, изображения и другие ресурсы.


Пример:

1
2
3
window.onload = function() {
  // код, который будет выполнен, когда весь контент страницы, включая стили и изображения, загружен
};


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


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