Документ: свойство 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 |
См. также
- Связанные события:
© 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