JS document ready: как использовать и зачем это нужно?

JS document ready - это событие, которое происходит, когда вся страница HTML загружена, и все элементы на странице (включая изображения, стили и скрипты) полностью загружены и готовы к использованию.

Для работы со событием document ready в JavaScript, мы можем использовать методы jQuery или функцию document.onload.

С помощью jQuery мы можем написать следующий код:

$(document).ready(function(){

// код, который будет выполнен, когда страница загрузится

});

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

$(document).ready(function(){

$('body').css('background-color', 'lightblue');

});

Использование функции document.onload будет выглядеть следующим образом:

document.onload = function(){

// код, который будет выполнен, когда страница загрузится

};

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

Кроме того, мы можем использовать атрибут defer в теге script, чтобы отложить выполнение скрипта до тех пор, пока не будет загружена вся страница:

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