.ready()

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

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

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

Обратите внимание, что хотя DOM всегда готов до полной загрузки страницы, прикрепление обработчика события load в коде, исполняемом во время обработчика .ready() , обычно небезопасно. Например, скрипты могут загружаться динамически задолго после загрузки страницы с помощью таких методов, как $.getScript(). Хотя обработчики, добавленные методом .ready() , всегда будут выполняться в динамически загруженном скрипте, событие load объекта window уже произошло, и эти обработчики никогда не будут запущены.

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

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

Начиная с jQuery 3.0, рекомендуется только первый синтаксис; другие синтаксисы по-прежнему работают, но устарели. Это связано с тем, что выбор не влияет на поведение метода .ready(), который неэффективен и может привести к неправильным предположениям о его поведении. Например, третий синтаксис работает с "document", который ничего не выбирает. Четвертый синтаксис ждет, пока документ станет готовым, но подразумевает (неправильно), что он ждет, пока изображения станут готовыми.

Также существует $(document).on( "ready", handler ), устаревший начиная с jQuery 1.8 и удаленный в jQuery 3.0. Обратите внимание, что если DOM станет готов до присоединения этого обработчика, обработчик не будет выполнен.

Метод .ready() обычно используется с анонимной функцией:

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

Что эквивалентно рекомендуемому способу вызова:

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

Псевдоним объекта jQuery

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

jq2 = jQuery.noConflict();
jq2(function( $ ) {
  // Code using $ as usual goes here; the actual jQuery object is jq2
});