Document.readyState

Свойство Document.readyState описывает состояние загрузки document.

Когда значение этого свойства изменяется, в объетке document запускается событие readystatechange.

Синтаксис

var string = document.readyState;

Значения

Свойство readyState объекта document может иметь одно из следующих значений:

loading
Страница все еще загружается.
interactive
Страница уже загружена и DOM дерево построено, но дополнительные ресурсы, такие как изображения и iframe, все еще загружаются.
complete
Страница и все дополнительные ресурсы уже загружены. Это состояние указывает, что событие load уже вызвано.

При изменении значения, данного свойства, вызывается событие readystatechange на объекте document.

Примеры

Разные состояния загрузки страницы

switch (document.readyState) {
  case "loading":
    // Страница все еще загружается
    break;
  case "interactive":
    // Страница уже загружена. Теперь мы можем получить доступ к DOM объектам.
    var span = document.createElement("span");
    span.textContent = "A <span> element.";
    document.body.appendChild(span);
    break;
  case "complete":
    // Страница загружена вместе с дополнительными ресурсами.
    console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText);
    break;
}

readystatechange как альтернатива событию DOMContentLoaded

// альтернатива событию DOMContentLoaded
document.onreadystatechange = function () {
  if (document.readyState == "interactive") {
    initApplication();
  }
}

readystatechange как альтернатива событию load

// альтернатива событию load
document.onreadystatechange = function () {
  if (document.readyState == "complete") {
    initApplication();
  }
}

Спецификации

Спецификация Состояние Комментарии
HTML Living Standard
Определение 'Document readiness' в этой спецификации.
Живой стандарт
HTML 5.1
Определение 'Document readiness' в этой спецификации.
Рекомендация
HTML5
Определение 'Document readiness' в этой спецификации.
Рекомендация Первичная спецификация.

Браузерная поддержка

BCD tables only load in the browser

Смотрите также