Разница между window.onload и $(document).ready()

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

window.onload

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

window.onload = function() { 
  // код для выполнения после загрузки всей страницы
}

$(document).ready()

$(document).ready(), с другой стороны, является функцией, предоставляемой библиотекой jQuery. Это событие срабатывает, когда DOM (Document Object Model) готов к манипуляциям, даже если все изображения или другие ресурсы еще не загружены.

$(document).ready(function() { 
  // код для выполнения после загрузки DOM
});

Отличия

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

С другой стороны, $(document).ready() сработает, как только загрузится DOM, и не будет ждать загрузки всех ресурсов. Это означает, что $(document).ready() сработает значительно быстрее, чем window.onload в большинстве случаев.

Однако стоит отметить, что оба этих события срабатывают только один раз – при первой загрузке страницы. Если потребуется выполнить функцию при каждом обновлении страницы, следует использовать другие методы, такие как setInterval() или setTimeout().

В зависимости от конкретной задачи, можно выбрать между window.onload и $(document).ready(), учитывая их различия.