Document.readyState

تصِفُ الخاصيّة Document.readyState حالة تحميل المُستند.

البنية العامة

var string = document.readyState;

القيم

يُمكن للخاصيّة أن تحمِل القيم التّاليّة:

• "loading"

المُستند لا يزال قيد التّحميل

• "interactive"

تحميل المُستند قد انتهى، لكنّ الموارد الفرعيّة كالصّور وصفحات الأنماط والأطر لا تزال قيد التّحميل

• "complete"

انتهى تحميل المُستندِ وجميع موارِده الفرعيّة. هذه الحالة تُشير إلى أنّ الحدث load سيُطلَق فورًا.

يُطلَق الحدث readystatechange على كائن المُستند document عند كلّ تغيّر لقيمة هذه الخاصيّة.

أمثلة

الحالات المُختلفة لجاهزيّة المُستند:

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("أول قاعدة في صفحات الأنماط هي " + document.styleSheets[0].cssRules[0].cssText);
    break;
}

استخدام الخاصيّة كبديلٍ عن الحدث DOMContentLoaded:

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

استخدام الخاصيّة كبديلٍ عن الحدث load:

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

استعمال الحدث readystatechange كمُنصِت أحداث (event listener) لإدخال أو تعديل الـDOM قبل الحدث DOMContentLoaded:

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

دعم المتصفحات

الميزة	Chrome	Internet Explorer	Firefox	Opera	Safari
الدعم الأساسي	5	4	4	11	5

انظر أيضا

• الحدث readystatechange
• الحدث DOMContentLoaded
• الحدث load

مصادر ومواصفات

• مواصفة HTML Living Standard
• مواصفة HTML 5.1
• مواصفة HTML5