Document.readyState

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

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

Синтаксис

var string = document.readyState;

Значения

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

loading

Страница все ещё загружается.

interactive

Страница уже загружена и DOM дерево построено, но дополнительные ресурсы, такие как изображения и iframe (en-US), все ещё загружаются.

complete

Страница и все дополнительные ресурсы уже загружены. Это состояние указывает, что событие load (en-US) уже вызвано.

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

Примеры

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

js

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

js

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

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

js

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

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

Specification
HTML Standard
# current-document-readiness

Совместимость с браузерами

BCD tables only load in the browser

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