यह सुनिश्चित करना कि आपका JavaScript कोड वेबपेज पूरी तरह से लोड होने के बाद ही चले, त्रुटियों को रोकने और सुचारू कार्यक्षमता सुनिश्चित करने के लिए महत्वपूर्ण है। समय से पहले निष्पादन करने से ऐसे मुद्दे हो सकते हैं जैसे उन तत्वों में हेरफेर करने की कोशिश करना जो रेंडर नहीं हुए हैं, जिससे अप्रत्याशित व्यवहार या क्रैश हो सकता है। यह लेख आपके स्क्रिप्ट को सही समय पर निष्पादित करने की गारंटी देने के कई प्रभावी तरीकों का विवरण देता है।
विषय सूची
- स्क्रिप्ट को बॉडी के अंत में रखना
windowऑब्जेक्ट परonloadइवेंट का उपयोग करनाbodyएलिमेंट परonloadइवेंट का उपयोग करना- बाहरी JavaScript फ़ाइल में
onloadका उपयोग करना - आधुनिक तरीके:
DOMContentLoaded
स्क्रिप्ट को बॉडी के अंत में रखना
सबसे सरल तरीका यह है कि आप अपने <script> टैग को HTML <body> एलिमेंट के अंत में रखें। यह सुनिश्चित करता है कि ब्राउज़र स्क्रिप्ट को निष्पादित करने से पहले पूरे पेज को पार्स और रेंडर करता है।
<!DOCTYPE html>
<html>
<head>
<title>मेरा वेबपेज</title>
</head>
<body>
<h1>नमस्ते, दुनिया!</h1>
<p>यह एक पैराग्राफ है।</p>
<script>
console.log("स्क्रिप्ट पेज लोड होने के बाद निष्पादित हुआ।");
// यहाँ DOM हेरफेर करें
</script>
</body>
</html>
यह छोटे स्क्रिप्ट के लिए पर्याप्त है। बड़ी परियोजनाओं के लिए, अधिक उन्नत तरीके बेहतर हैं।
window ऑब्जेक्ट पर onload इवेंट का उपयोग करना
onload इवेंट तब फायर होता है जब सभी संसाधनों सहित पूरा पेज लोड हो जाता है। window ऑब्जेक्ट में एक इवेंट लिसनर संलग्न करें:
<script>
window.onload = function() {
console.log("पेज पूरी तरह से लोड हो गया");
// आपका कोड यहाँ
};
</script>
यह गारंटी देता है कि आपका कोड केवल सब कुछ तैयार होने के बाद ही चलता है।
body एलिमेंट पर onload इवेंट का उपयोग करना
वैकल्पिक रूप से, इवेंट लिसनर को सीधे <body> एलिमेंट में संलग्न करें। यह कुछ मामलों में थोड़ा तेज़ हो सकता है:
<body onload="myFunction()">
<script>
function myFunction() {
console.log("पेज बॉडी लोड हो गया");
// आपका कोड यहाँ
}
</script>
</body>
बाहरी JavaScript फ़ाइल में onload का उपयोग करना
बड़ी परियोजनाओं के लिए, बाहरी JavaScript फ़ाइलों का उपयोग करें। onload इवेंट उसी तरह काम करता है:
myScript.js:
window.onload = function() {
console.log("स्क्रिप्ट पेज लोड होने के बाद निष्पादित हुआ।");
// आपका कोड यहाँ
};
index.html:
<script src="myScript.js"></script>
<script> टैग को <head> या <body> में रखें; onload इवेंट समय को संभालता है।
आधुनिक तरीके: DOMContentLoaded
बेहतर प्रदर्शन के लिए, DOMContentLoaded इवेंट का उपयोग करने पर विचार करें। यह इवेंट तब फायर होता है जब HTML दस्तावेज़ पूरी तरह से लोड और पार्स हो जाता है, स्टाइलशीट, छवियों और सबफ़्रेम के लोड होने का इंतज़ार किए बिना। यह अक्सर onload से तेज़ होता है।
document.addEventListener('DOMContentLoaded', function() {
console.log('DOM पूरी तरह से लोड हो गया');
// आपका कोड यहाँ
});
अपनी परियोजना के आकार और जटिलता के लिए सबसे उपयुक्त विधि चुनें। साधारण परियोजनाओं के लिए, <body> के अंत में <script> टैग रखना पर्याप्त हो सकता है। बड़ी परियोजनाओं या अतुल्यकालिक संचालन के लिए, onload या DOMContentLoaded अधिक मजबूत और विश्वसनीय समाधान प्रदान करते हैं। हमेशा स्वच्छ, सुव्यवस्थित कोड को प्राथमिकता दें।