css.in.ua
Підтримати

Наповнення JS розділу

Добридень, Пані та Панове, завдяки вам вдалося зібрати більше 19тис грн з необхідних 15тис на впровадження JS розділу.

JS розділ вже впроваджено - переходимо до його наповнення і почнемо бігти довгий марафон, адже JS має більше 1100 різноманітних методів, властивостей, подій і т.д., які необхідно описати.

Будемо працювати, і вдень, і вночі, щоб орієнтовно взимку закінчити наповнювати JS розділ!

Ви також можете допомогти нам в цьому. Долучайтеся до нашої спільноти в дискорді - ставайте її частиною і допомагайте нашому розвитку.

Також, підтримуйте нас матеріально.

Підтримати матеріально

JS властивість Document.readyState

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

Властивість 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", яке вказує на те, що документ було повністю завантажено. Використання цієї властивості дозволяє реалізувати логіку, яка залежить від стану завантаження сторінки.
Порада:

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

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

Синтаксис

Document.readyState

Значення

Return

Переглядачі

Переглядач

1

3.6

1

11

12
Переглядач

4.4

18

4

1
Переглядач

-

-

Приклади


У цьому прикладі кнопка "Перевірити стан документа" дозволяє користувачу в будь-який момент отримати поточний стан завантаження документа. При натисканні на кнопку, обробник подій зчитує властивість Document.readyState і виводить її значення в параграф #stateResult.

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

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

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

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);
}

Документи

Зв'язок