जावास्क्रिप्ट में, जब मैं पृष्ठ लोड होने पर एक बार स्क्रिप्ट चलाने के लिए चाहता हूं, तो क्या मुझे window.onload का उपयोग करना चाहिए या बस स्क्रिप्ट लिखें?"window.onload" का उपयोग कब करें?
उदाहरण के लिए, अगर मैं एक पॉप-अप करना चाहते हैं, मैं लिखना चाहिए (सीधे <script> टैग के अंदर):
alert("hello!");
या:
window.onload = function() {
alert("hello!");
}
दोनों बस के बाद चलाने के लिए दिखाई देते हैं पेज लोड हो गया है। क्या अंतर है?
पहला ब्राउज़र तब चलता है जब ब्राउज़र इसे प्राप्त करता है।
दूसरा यह चलाने से पहले खिड़की को लोड करने की प्रतीक्षा करता है।
सामान्य रूप से आपको दूसरा करना चाहिए, लेकिन आपको फ़ंक्शन को परिभाषित करने के बजाय इसे ईवेंट श्रोता संलग्न करना चाहिए। उदाहरण के लिए:
window.addEventListener('load',
function() {
alert('hello!');
}, false);
यह इस बात पर निर्भर करता है कि जब आप स्क्रिप्ट तत्व का सामना करते हैं तो आप इसे चलाने के लिए चाहते हैं या यदि आप लोड ईवेंट को आग लगाना चाहते हैं (जो पूरे दस्तावेज़ के बाद (छवियों जैसी छवियों सहित) लोड हो गया है तो यह चलाना चाहता है)।
न तो हमेशा सही है।
सामान्य रूप से, हालांकि, मैंका उपयोग करने के पक्ष में सीधे onload पर कार्यों को असाइन करने से बचाना चाहता हूं (यदि मुझे पुराने ब्राउज़र का समर्थन करने की आवश्यकता है तो संगतता पुस्तकालयों के साथ)।
यहां documentation on MDN है।
इसके अनुसार:
दस्तावेज़ लोड हो रहा है प्रक्रिया के अंत मेंलोड घटना आग। इस बिंदु पर, दस्तावेज़ में सभी ऑब्जेक्ट्स डोम में हैं, और सभी छवियों और उप-फ्रेम लोडिंग समाप्त हो गए हैं।
जैसे ही ब्राउजर एचटीएमएल में इस स्थान पर हिट करता है, कोड का पहला स्निपेट चलाएगा।
दूसरा स्निपेट पॉपअप ट्रिगर करेगा जब डोम और सभी छवियां पूरी तरह से लोड हो जाएंगी (चश्मा देखें)।
alert() फ़ंक्शन को ध्यान में रखते हुए, यह वास्तव में कोई फर्क नहीं पड़ता कि यह किस बिंदु पर चलता है (यह window ऑब्जेक्ट के अलावा किसी भी चीज़ पर निर्भर नहीं है)। लेकिन अगर आप DOM में हेरफेर करना चाहते हैं - तो निश्चित रूप से इसे ठीक से लोड करने के लिए प्रतीक्षा करनी चाहिए।
डोम लोड होने की प्रतीक्षा करने का कारण यह है कि आप अपनी स्क्रिप्ट के बाद लोड होने वाले किसी भी तत्व को लक्षित कर सकते हैं। यदि आप सिर्फ alert बना रहे हैं, तो इससे कोई फर्क नहीं पड़ता। आइए मान लें कि, आप div को लक्षित कर रहे थे जो आपकी स्क्रिप्ट के बाद आपके मार्कअप में था, यदि आप डोम पेड़ के उस टुकड़े को लोड करने तक प्रतीक्षा नहीं करते हैं तो आपको एक त्रुटि मिलेगी।
document.readywindow.onload का एक शानदार विकल्प है यदि आप jQuery का उपयोग कर रहे हैं।
यहाँ देखें: window.onload vs $(document).ready()
आप तीन विकल्प हैं:
सीधे अंदर स्क्रिप्ट टैग यह जैसे ही यह पार्स किया गया है चलाता है।
document.addEventListener("DOMContentLoaded", function(){}); के अंदर डीओएम तैयार होने के बाद इसे चलाएगा।
window.onload function(){}) के अंदर जैसे ही सभी पृष्ठ संसाधन लोड हो जाएंगे।
अन्य उत्तर सभी पुराने हो चुके लगते
सबसे पहले, शीर्ष पर स्क्रिप्ट डाल और window.onload का उपयोग कर एक विरोधी पैटर्न है। यह आईई दिनों से जावास्क्रिप्ट की सबसे अच्छी या गलत समझ में और ब्राउज़र को सबसे खराब पर छोड़ दिया गया है।
तुम सिर्फ अपनी स्क्रिप्ट अपने html
<html>
<head>
<title>My Page</title>
</head>
<body>
content
</body>
<script src="some-external.js"></script>
<script>
some in page code
</script>
</html>
के नीचे ले जा सकते हैं एकमात्र कारण लोगों window.onload प्रयोग किया जाता है, क्योंकि वे गलती से head खंड में जाने के लिए की जरूरत स्क्रिप्ट पर विश्वास किया। चूंकि आपकी स्क्रिप्ट मुख्य खंड में थी, तो चीजें निष्पादित की जाती हैं, इसलिए क्रम में निष्पादित करके शरीर और आपकी सामग्री अभी तक मौजूद नहीं है।
हैकी वर्कअराउंड window.onload का उपयोग पृष्ठ के बाकी हिस्सों को लोड करने के लिए करना था। अपनी स्क्रिप्ट को नीचे तक ले जाने से भी उस समस्या को हल किया गया है और अब window.onload का उपयोग करने की आवश्यकता नहीं है क्योंकि आपका शरीर और सामग्री पहले ही लोड हो चुकी है।
अधिक आधुनिक समाधान आपकी स्क्रिप्ट पर defer टैग का उपयोग करना है, लेकिन यह उपयोग करने के लिए कि आपकी स्क्रिप्ट को सभी बाहरी होने की आवश्यकता है।
<head>
<script src="some-external.js" defer></script>
<script src="some-other-external.js" defer></script>
</head>
यह लाभ यह है कि ब्राउज़र तत्काल स्क्रिप्ट डाउनलोड होना शुरू हो जाएगा और यह उन्हें निर्दिष्ट क्रम में निष्पादित करेगा, लेकिन यह जब तक के बाद पृष्ठ के लोड होते उन्हें निष्पादित करने के लिए इंतजार करेंगे, window.onload या बेहतर की कोई आवश्यकता नहीं लेकिन अभी भी अनइडेड window.addEventListener('load', ...
वाह, यह सवाल पुराना है! 'Defer' के बारे में टिप के लिए धन्यवाद। मैंने इसे देखा है लेकिन कभी इसका एहसास नहीं हुआ कि इसका क्या अर्थ है। –
हाँ, ठीक है, यह पहला परिणाम है जब 'window.onload' का उपयोग करने के बारे में googling तो ऐसा लगता है कि इसे एक अद्यतन उत्तर की आवश्यकता है – gman
@xgqfrms [jQuery हमेशा जवाब नहीं है] (http://meta.stackoverflow.com/questions/335328/when-is-use-jquery-not-a-valid-answer-to- एक जावास्क्रिप्ट-प्रश्न) ... –