Spec-Zone.ru › Web APIs

Документ: свойство readyState

Базовая линия Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

  • Узнать больше
  • Показать полную совместимость
  • Отправить отзыв

Свойство Document.readyState описывает состояние загрузки document. При изменении значения этого свойства на объекте document срабатывает событие readystatechange.

Значение

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

loading

document все еще загружается.

interactive

Документ завершил загрузку и был проанализирован, но до сих пор загружаются подресурсы, такие как скрипты, изображения, таблицы стилей и фреймы. Состояние указывает на то, что вот-вот будет вызвано событие DOMContentLoaded.

complete

Документ и все подресурсы завершили загрузку. Состояние указывает на то, что вот-вот будет вызвано событие load.

Примеры

Разные состояния готовности

switch (document.readyState) {
  case "loading":
    // The document is loading.
    break;
  case "interactive": {
    // The document has finished loading and we can access DOM elements.
    // Sub-resources such as scripts, images, stylesheets and frames are still loading.
    const span = document.createElement("span");
    span.textContent = "A <span> element.";
    document.body.appendChild(span);
    break;
  }
  case "complete":
    // The page is fully loaded.
    console.log(
      `The first CSS rule is: ${document.styleSheets[0].cssRules[0].cssText}`,
    );
    break;
}

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

// Alternative to DOMContentLoaded event
document.onreadystatechange = () => {
  if (document.readyState === "interactive") {
    initApplication();
  }
};

readystatechange в качестве альтернативы событию загрузки

// Alternative to load event
document.onreadystatechange = () => {
  if (document.readyState === "complete") {
    initApplication();
  }
};

readystatechange как обработчик событий для вставки или изменения DOM до события DOMContentLoaded

document.addEventListener("readystatechange", (event) => {
  if (event.target.readyState === "interactive") {
    initLoader();
  } else if (event.target.readyState === "complete") {
    initApp();
  }
});

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

Спецификация
HTML
# current-document-readiness

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

Рабочий стол Мобильные устройства
Chrome Edge Firefox Opera Safari Chrome Android Firefox для Android Opera Android Safari на iOS Samsung Internet WebView Android
readyState 1 12 3.6
11Opera Presto отправляет 'complete' поздно после события 'load' (в неправильном порядке, согласно спецификации HTML5).
1 18 4
11Opera Presto отправляет 'complete' поздно после события 'load' (в неправильном порядке, согласно спецификации HTML5).
1 1.0 4.4

См. также

  • Связанные события:
    • readystatechange
    • DOMContentLoaded
    • load

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API