document.readyState в JavaScript — стан завантаження

Загальний опис

Властивість readyState об'єкта Document в JavaScript надає інформацію про поточний стан завантаження документа. Ця властивість допомагає розробникам контролювати процес завантаження сторінки і виконувати відповідні дії в залежності від її стану. Основна суть readyState полягає в тому, щоб забезпечити можливість програмно перевіряти, чи завершено завантаження документа, чи все ще триває процес, а також чи виникли певні помилки або проблеми під час завантаження.

Основне застосування readyState полягає у керуванні виконанням скриптів, які пов'язані зі завантаженням документа, виконанням асинхронних запитів або взаємодією з DOM-елементами. Завдяки цій властивості розробники можуть запускати функції або виконувати інші дії тільки після того, як документ буде повністю завантажений.

Простий приклад

if (document.readyState === 'loading') {
    console.log('Документ ще завантажується...');
} else {
    console.log('Документ завантажено.');
}

У цьому прикладі виводиться повідомлення, яке вказує на те, чи документ ще завантажується чи вже завантажено. Це дозволяє виконувати певні дії, тільки коли документ готовий для маніпуляцій.

Використання разом з подіями

document.addEventListener('readystatechange', function() {
    if (document.readyState === 'complete') {
        console.log('Документ завантажено і готовий для використання.');
    }
});

У цьому прикладі додається обробник події, який викликається, коли змінюється readyState. Коли readyState стає рівним 'complete', виводиться повідомлення про те, що документ повністю завантажено.

правити

Порада

readyState може приймати два основні значення: loading, яке означає, що документ все ще завантажується, та "complete", яке вказує на те, що документ було повністю завантажено. Використання цієї властивості дозволяє реалізувати логіку, яка залежить від стану завантаження сторінки.

автор: Bond правити

Порада

Для виконання скриптів після повного завантаження документа, рекомендується використовувати перевірку readyState у комбінації з подією DOMContentLoaded. Це забезпечує, що ваш код виконається відразу після завантаження HTML, але перед завантаженням зовнішніх ресурсів, таких як зображення.

автор: Bond правити

Порада

У сценаріях, коли потрібно забезпечити взаємодію з елементами, які можуть бути додані до документа динамічно, важливо регулярно перевіряти readyState. Це допоможе уникнути ситуацій, коли скрипт намагається отримати доступ до елементів, які ще не були повністю завантажені або ініціалізовані.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

Document.readyState

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	3.6	1	11	12	11

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

document.addEventListener("DOMContentLoaded", function() {
  if (document.readyState === "complete") {
    console.log("Документ повністю завантажений і готовий до використання.");
  }
});

function addDynamicContent() {
  var newElement = document.createElement("p");
  newElement.textContent = "Це динамічно доданий контент.";
  document.body.appendChild(newElement);
}

if (document.readyState === "interactive" || document.readyState === "complete") {
  addDynamicContent();
} else {
  document.addEventListener("DOMContentLoaded", addDynamicContent);
}

<header>
  <h2 class="title">Document.readyState</h2>
  <p class="description">Повертає стан завантаження документа.</p>
</header>
<main>
  <div class="result">
    <button id="checkState">Перевірити стан документа</button>
    <p id="stateResult">Стан документа з'явиться тут...</p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

document.getElementById('checkState').addEventListener('click', function () {
  var state = document.readyState;
  document.getElementById('stateResult').textContent = 'Стан документа: ' + state;
});
//# sourceURL=pen.js