.ready() – Устанавливает обработчик готовности дерева DOM.

.ready( handler )

• handler – функция, которая будет установлена в качестве обработчика, т.е. будет запущена после того, как DOM полностью загрузится.

Метод .ready() предлагает способ запуска JavaScript-кода, после того, как Объектная Модель Документа (DOM) полностью загрузится. Этот обработчик отлично подходит для выполнения задач, которые необходимо запустить до того, как посетитель начнет работать с сайтом, например для подключения плагинов или добавления обработчиков событий.

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

Большинство браузеров предоставляют аналогичную функциональность в виде события DOMContentLoaded, однако метод .ready() отличается важным и полезным свойством – если DOM становится готов и браузер запускает обработчик DOMContentLoaded до того, как код вызовет .ready(handler), обработчик функции будет выполняться. Напротив, прослушиватель событий DOMContentLoaded, добавленный после запуска события никогда не выполнится.

Так же браузеры предоставляют возможность обработать событие загрузки объекта окна. Такое событие будет срабатывать, когда на странице загружены все ресурсы, включая изображения. Для его вызова в jQuery нужно использовать $( window ).on( "load", handler ). Такое событие удобно применять когда код используется для обработки загруженных элементов (например, мы хотим изменить размер изображения).

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

• $( handler )
• $( document ).ready( handler )
• $( "document" ).ready( handler )
• $( "img" ).ready( handler )
• $().ready( handler )

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

Метод .ready() может быть вызван только от объекта текущего документа, поэтому селектор можно опустить:

$( document ).ready(function() {
  // Handler for .ready() called.
});

эквивалентно

$(function() {
  // Handler for .ready() called.
});

Алиас на пространство имён jQuery

Когда вы используете $.noConflict() для предотвращения конфликтов пространства имен, ярлык $ становится недоступным. Однако обработчику .ready() передается ссылка на объект jQuery, который вызывает этот метод, что позволяет использовать объект jQuery как $ не зная его псевдонимов:

jq2 = jQuery.noConflict();
jq2(function( $ ) {
  // Код, использующий $ "идет" сюда, а фактическим объектом jQuery является jq2
});