Готовность DOM: .ready() и $.ready

Определение и применение

Готовность DOM означает, что структура документа разобрана и с ней можно работать. Обработчик .ready() помогает назначить события и инициализировать интерфейс. Объект $.ready позволяет дождаться того же момента вместе с другими асинхронными операциями.

Синтаксис

$(function ($) { /* DOM готов */ });
$(document).ready(handler);
Promise.resolve($.ready).then(handler);
$.when($.ready, anotherPromise).then(handler);

Параметры и возвращаемое значение

handler — функция. Метод .ready(handler) возвращает коллекцию, а короткая форма $(handler) регистрирует тот же обработчик. Он будет вызван и при регистрации после готовности DOM. С версии 3.0 исключение одного такого обработчика не мешает остальным.

$.ready — thenable, то есть значение с методом then. Не вызывайте $.ready() для ожидания и не рассчитывайте на наличие всех методов Deferred. Совместимые способы — Promise.resolve($.ready) и $.when().

Особенности и совместимость

Готовность DOM не означает завершения загрузки изображений. Для конкретного изображения используйте его состояние и событие загрузки. У поздно зарегистрированного DOMContentLoaded нет поведения «вызвать сразу, если уже готово», которое предоставляет jQuery.

С 3.0 рекомендована форма $(handler). Записи вроде $("img").ready(handler) устарели и всё равно ждут документ, а не картинки. Прежнее событие $(document).on("ready", handler) удалено в 3.0.

Документация

• ready — jQuery API
• jQuery.ready — jQuery API

Пример использования

Два способа дождаться DOM: попробуйте сами

Дождитесь появления двух сообщений. Они подтверждают готовность документа; их взаимный порядок не используется приложением. Используется jQuery 4.0.0.

index.html

HTML

<pre id="result"></pre>

main.js

JavaScript

$(function () {
    $('#result').append('Обработчик: DOM готов\n')
})
Promise.resolve($.ready).then(function () {
    $('#result').append('Promise: DOM готов\n')
})