HTML DOM readyState प्रॉपर्टी

readyState प्रॉपर्टी क्या है?

DOM readyState प्रॉपर्टी वर्तमान HTML दस्तावेज़ की लोडिंग स्थिति को दर्शाने वाला एक स्ट्रिंग लौटाती है। यह जांचने के लिए उपयोगी है कि क्या दस्तावेज़ पूरी तरह से लोड हो चुका है या अभी भी पार्सिंग/लोडिंग हो रहा है।

सिंटैक्स

document.readyState

संभावित मान

उदाहरण

यह उदाहरण बटन क्लिक पर वर्तमान दस्तावेज़ लोडिंग स्थिति प्रदर्शित करता है:

<!DOCTYPE html>
<html>
<head>
<style>
  html { height: 100%; }
  body {
    text-align: center;
    color: #fff;
    background: #ff7f5094;
    height: 100%;
  }
  p { font-weight: 700; font-size: 1.2rem; }
  .btn {
    background: #0197F6;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 35%;
    margin: 2rem auto;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
  }
  .show { font-size: 1.5rem; }
</style>
</head>
<body>
<h1>DOM readyState प्रॉपर्टी डेमो</h1>
<p>क्या वर्तमान दस्तावेज़ तैयार है?</p>
<button onclick="showStatus()" class="btn">स्थिति जांचें</button>
<div class="show"></div>
<script>
  function showStatus() {
    var state = document.readyState;
    var msg = "हाँ, आपके वर्तमान दस्तावेज़ की लोडिंग है " + state + "।";
    if (state === "loading") msg += " (अभी पार्स हो रहा है)";
    else if (state === "interactive") msg += " (DOM तैयार, संसाधन लोड हो रहे हैं)";
    else if (state === "complete") msg += " (पूरी तरह से लोड)";

    document.querySelector(".show").innerHTML = msg;
  }
</script>
</body>
</html>

आउटपुट

पेज लोड होने के बाद "स्थिति जांचें" बटन पर क्लिक करने पर, आमतौर पर "complete" प्रदर्शित होता है। पेज लोड के दौरान जल्दी क्लिक करने पर "loading" या "interactive" दिख सकता है।

readyState बनाम इवेंट्स

सामान्य पैटर्न

// यदि पहले से तैयार है तो तुरंत चलाएं, अन्यथा प्रतीक्षा करें
function runWhenReady(fn) {
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', fn);
  } else {
    fn(); // पहले से interactive या complete
  }
}

// या पूर्ण लोड के लिए:
function runWhenFullyLoaded(fn) {
  if (document.readyState === 'complete') {
    fn();
  } else {
    window.addEventListener('load', fn);
  }
}

उपयोग के मामले

• थर्ड-पार्टी स्क्रिप्ट्स जो यह नहीं जानतीं कि वे कब लोड होती हैं।
• शर्ती इनिशियलाइज़ेशन (उदाहरण: केवल तभी विजेट इनिट करें जब DOM तैयार हो)।
• लोडिंग स्थिति डिबग करना / प्रदर्शित करना।