$(document).ready बिना jQuery: 2025 में आधुनिक विकल्प

2025 में $(document).ready के लिए jQuery को क्यों छोड़ना चाहिए?

यदि आप अभी भी $(document).ready(function() { ... }) लिख रहे हैं — तो आप या तो किसी लीगेसी प्रोजेक्ट पर काम कर रहे हैं, या आधुनिक JavaScript की संभावनाओं को खो रहे हैं। 2025 में jQuery एक बटन वाले फोन जैसा है: काम करता है, लेकिन सब बहुत पहले टच स्क्रीन पर आ चुके हैं।

Stack Overflow पर $(document).ready equivalent without jQuery प्रश्न ने सैकड़ों हज़ारों व्यूज़ एकत्र किए हैं। इसका मतलब है कि दुनिया भर के डेवलपर DOM लोड होने के बाद कोड चलाने के हल्के, तेज़ और आधुनिक तरीके खोज रहे हैं। और इसका उत्तर सरल है: ब्राउज़रों का मूल समर्थन पहले से ही उन सभी ज़रूरतों को 100% कवर करता है जिन्हें कभी jQuery ने हल किया था।

इस लेख में हम $(document).ready को शुद्ध JavaScript से बदलने के 3 सर्वश्रेष्ठ तरीकों पर चर्चा करेंगे, प्रदर्शन की बारीकियों पर बात करेंगे और वास्तविक कोड उदाहरण दिखाएंगे जिन्हें आप आज ही उपयोग कर सकते हैं।

DOMContentLoaded — jQuery के बिना मुख्य नायक

$(document).ready का सबसे सीधा एनालॉग DOMContentLoaded इवेंट है। यह तब ट्रिगर होता है जब ब्राउज़र HTML दस्तावेज़ को पूरी तरह से लोड और पार्स कर लेता है, लेकिन इमेज, स्टाइल और अन्य संसाधनों के लोड होने से पहले। jQuery भी पर्दे के पीछे यही करता था।

बेसिक सिंटैक्स इस प्रकार है:

document.addEventListener('DOMContentLoaded', function() {\n    // आपका कोड DOM के पूरी तरह लोड होने के बाद चलेगा\n    console.log('DOM पूरी तरह लोड और तैयार है!');\n    document.querySelector('.header').style.color = '#2c3e50';\n});

यह jQuery से बेहतर क्यों है?

\n
• गति: एक फंक्शन के लिए 30+ KB लाइब्रेरी लोड करने की ज़रूरत नहीं।
\n
• नियंत्रण: आपको ठीक-ठीक पता है कि लोडिंग के समय क्या हो रहा है।
\n
• अनुकूलता: सभी आधुनिक ब्राउज़रों में काम करता है (IE9+, Chrome, Firefox, Safari, Edge)।
\n

लेकिन एक बारीकी है: यदि आपकी स्क्रिप्ट DOM लोड होने के बाद जुड़ती है, तो इवेंट काम नहीं करेगा। समाधान — document.readyState की जाँच:

function ready(fn) {\n    if (document.readyState !== 'loading') {\n        fn(); // DOM पहले से लोड है\n    } else {\n        document.addEventListener('DOMContentLoaded', fn);\n    }\n}\nready(function() {\n    console.log('DOM लोड होने के बाद गारंटी के साथ चलेगा');\n});

यह पैटर्न 2025 में $(document).ready को बदलने का स्वर्ण मानक है।

defer एट्रिब्यूट: कोड की एक भी लाइन के बिना सबसे आसान तरीका

क्या होगा अगर मैं कहूँ कि आप DOMContentLoaded बिल्कुल नहीं लिख सकते? <script> टैग में defer एट्रिब्यूट आपके लिए सारा काम करता है:

<script src="script.js" defer></script>

यह कैसे काम करता है? ब्राउज़र स्क्रिप्ट को HTML के समानांतर लोड करता है, लेकिन इसे दस्तावेज़ के पूरी तरह पार्स होने के बाद ही चलाता है। यह इसके बराबर है कि script.js के अंदर का सारा कोड स्वचालित रूप से $(document).ready में लपेटा गया हो।

लाभ:

\n
• कोई अतिरिक्त कोड नहीं — बस एट्रिब्यूट जोड़ें।
\n
• defer वाली स्क्रिप्ट HTML में उनके दिखने के क्रम में चलती हैं।
\n
• 97% ब्राउज़रों में काम करता है (पुराने Safari संस्करणों सहित)।
\n

कब उपयोग करें? सामान्य स्क्रिप्ट के लिए आदर्श जो DOM के साथ काम करती हैं लेकिन रेंडरिंग को ब्लॉक नहीं करतीं। उदाहरण:

<script src="analytics.js" defer></script>\n<script src="app.js" defer></script>\n<!-- app.js, analytics.js के बाद लेकिन window.onload से पहले चलेगा -->

jQuery से तुलना करें: app.js के अंदर $(document).ready — यह अतिरिक्त कोड है। और defer के साथ आप बस लिखते हैं:

// app.js — को