709

जो अधिक व्यापक रूप से समर्थित है: window.onloadया document.onload?

javascript event-handling dom-events

2

MDN डॉक्स इन windowघटनाओं की व्याख्या करता है: onloadऔर DOMContentLoaded। प्रयोग उदाहरण :, window.addEventListener('DOMContentLoaded', callback)। 2019 के मध्य तक, सभी प्रमुख ब्राउज़रों के साथ संगत। ----- developer.mozilla.org/en-US/docs/Web/API/Window/... ------ developer.mozilla.org/en-US/docs/Web/API/Window/load_event

— क्रेग हिक्स

मेरे लिए अभी भी, फ़ायरफ़ॉक्स 75.0 में आज भी, window.onloadऔर एक दूसरे से अलगdocument.onload हैं ! window.onloadलगता है बाद में जगह लेने के लिए और थोड़ा अधिक भरी हुई है document.onload! (कुछ चीजें विंडो के साथ काम कर रही हैं जो दस्तावेज़ के साथ काम नहीं कर रही हैं! यह डॉक्यूमेंट के लिए जाती है। ट्रेडस्टॉकचेंज 'पूर्ण' और साथ ही!)

— एंड्रयू

722

वे कब आग लगाते हैं?

window.onload

डिफ़ॉल्ट रूप से, जब इसकी सामग्री (चित्र, CSS, स्क्रिप्ट, आदि) सहित पूरे पृष्ठ को लोड किया जाता है, तो इसे निकाल दिया जाता है ।

कुछ ब्राउज़रों में अब document.onloadडोम की तरह तैयार होने पर यह भूमिका निभाता है और आग लेता है।

document.onload

यह कहा जाता है जब DOM तैयार होता है जो छवियों से पहले हो सकता है और अन्य बाहरी सामग्री लोड होती है।

वे कितनी अच्छी तरह से समर्थित हैं?

window.onloadसबसे व्यापक रूप से समर्थित प्रतीत होता है। वास्तव में, कुछ सबसे आधुनिक ब्राउज़रों को एक अर्थ में प्रतिस्थापित document.onloadकिया गया है window.onload।

ब्राउज़र समर्थन मुद्दे सबसे अधिक संभावना है कि क्यों कई लोग पुस्तकालयों का उपयोग करने के लिए शुरू कर रहे हैं जैसे कि jQuery जैसे दस्तावेज़ तैयार होने के लिए जाँच को संभालने के लिए, जैसे:

$(document).ready(function() { /* code here */ });
$(function() { /* code here */ });

इतिहास के उद्देश्य के लिए। window.onloadबनाम body.onload:

ओवर के उपयोग के संबंध में थोड़ी देर पहले कोडिंगफोरम पर एक समान प्रश्न पूछा गया था । परिणाम यह लग रहा था कि आपको उपयोग करना चाहिए क्योंकि यह आपकी संरचना को कार्रवाई से अलग करना अच्छा है।window.onloadbody.onloadwindow.onload

— जोश में
स्रोत

25

वास्तव में यह कथन एक विकल्प के बीच में निर्देशित किया गया लगता है window.onloadऔर <body onload="">जो पूरी तरह से अलग है (और "कार्रवाई से अलग संरचना" इस संदर्भ में बहुत अधिक समझ में आता है)। ऐसा नहीं है कि उत्तर गलत है, लेकिन इसका आधार है।

— Thor84no

2

वह बोली व्याकरणिक रूप से भयानक है ... कुछ (चिह्नित) संपादन मदद नहीं करनी चाहिए?

— Kheldar

@ Thor84no आखिरकार मुझे इस पर एक और नज़र डालने का समय मिल गया। मैंने कुछ सुधार किए हैं।

— जोश में

@Kheldar मैंने यह निर्णय लेने के लिए विरोधाभास का फैसला किया क्योंकि यह उबड़-खाबड़ था।

— जोश में

@JoshMein क्या इसका मतलब यह है कि document.onloadJS-jQuery के बराबर है document.ready?

— जॉन सीजे

276

सामान्य विचार यह है कि window.onload फायर तब होता है जब डॉक्यूमेंट की विंडो प्रेजेंटेशन और डॉक्यूमेंट के लिए तैयार होती है। डोनलोड तब होता है जब DOM ट्री (डॉक्यूमेंट के भीतर मार्कअप कोड से निर्मित) पूरा हो जाता है ।

आदर्श रूप से, DOM- ट्री इवेंट्स की सदस्यता लेते हुए , जावास्क्रिप्ट के माध्यम से ऑफ़स्क्रीन-जोड़तोड़ की अनुमति देता है, लगभग कोई सीपीयू लोड नहीं करता है । इसके विपरीत, window.onloadकर सकते हैं आग करने के लिए कुछ समय ले , कई बाह्य संसाधनों में अभी तक जब, अनुरोध किया जाना पार्स और भरी हुई।

सबसे अच्छा परिदृश्य:

अंतर का निरीक्षण करने के लिए और आपकी पसंद का ब्राउज़र उपरोक्त घटना संचालकों को कैसे लागू करता है , बस अपने दस्तावेज़ के टैग में निम्नलिखित कोड डालें।<body>

<script language="javascript">
window.tdiff = []; fred = function(a,b){return a-b;};
window.document.onload = function(e){ 
    console.log("document.onload", e, Date.now() ,window.tdiff,  
    (window.tdiff[0] = Date.now()) && window.tdiff.reduce(fred) ); 
}
window.onload = function(e){ 
    console.log("window.onload", e, Date.now() ,window.tdiff, 
    (window.tdiff[1] = Date.now()) && window.tdiff.reduce(fred) ); 
}
</script>

►Result:

यहां क्रोम v20 (और शायद सबसे वर्तमान ब्राउज़र) के लिए देखने योग्य परिणाम है।

कोई document.onloadघटना नहीं ।
onloadजब दो बार आग लगती है <body>, तो एक बार जब अंदर घोषित किया जाता है <head>(जहां घटना तब काम करती है document.onload)।
काउंटर की स्थिति पर निर्भर मतगणना और अभिनय दोनों घटना व्यवहार का अनुकरण करने की अनुमति देता है।
वैकल्पिक रूप window.onloadसे HTML- <head>तत्व की सीमा के भीतर ईवेंट हैंडलर घोषित करें ।

AmpleExample प्रोजेक्ट:

उपरोक्त कोड इस परियोजना के कोडबेस ( index.htmlऔर keyboarder.js) से लिया गया है ।

विंडो ऑब्जेक्ट के ईवेंट हैंडलर की सूची के लिए , कृपया MDN प्रलेखन देखें।

— लोरेंज लो सॉर
स्रोत

141

इवेंट श्रोता जोड़ें

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function(event) {
      // - Code to execute when all DOM content is loaded. 
      // - including fonts, images, etc.
  });
</script>

`Update March 2017`

1 वेनिला जावास्क्रिप्ट

window.addEventListener('load', function() {
    console.log('All assets are loaded')
})

2 jQuery के

$(window).on('load', function() {
    console.log('All assets are loaded')
})

शुभ लाभ।

— आकाश
स्रोत

14

"DOMContentLoaded घटना को निकाल दिया गया है जब प्रारंभिक HTML दस्तावेज़ को पूरी तरह से लोड किया गया है और लोडिंग समाप्त करने के लिए स्टाइलशीट, छवियों और सबफ़्रेमियों की प्रतीक्षा किए बिना।" - developer.mozilla.org/en/docs/Web/Events/DOMContentLoaded तो आप इस घटना में लोड होने वाली हर चीज के बारे में गलत लगते हैं।

— ProfK

2

@ProfK, आपकी प्रतिक्रिया के लिए धन्यवाद। क्या आप कोशिश कर सकते हैं window.addEventListener('load', function() {...})? मैंने अपना उत्तर भी अपडेट कर दिया है।

— आकाश

4

मुझे इस उत्तर के बारे में क्या पसंद है कि यह एक सादे-पुराने-जावास्क्रिप्ट समाधान देता है। आपको लगता है कि ज्यादातर लोगों को लगता है कि jQuery सभी ब्राउज़रों में बनाया गया है, यह देखते हुए कि यह केवल उत्तर के रूप में कितनी बार दिया जाता है।

— डेव लैंड

दोहरी समस्या जब लानत जॅक्वरी को लोड होने में बहुत समय लगता है और आपको $ नहीं मिलता है। मेरा विचार है कि $ (खिड़की) पहले से ही प्रकार के समाधानों पर काम करने के लिए भरोसा नहीं किया जाना चाहिए।

— Shayne

1

मैंने आज के क्रोम में दोनों की कोशिश की है। यह सीएसएस और फोंट के लिए इंतजार नहीं कर रहा है।

— 15:13 बजे movAX13h

78

पार्सिंग HTML दस्तावेजों के अनुसार - अंत ,

ब्राउज़र HTML स्रोत को पार्स करता है और स्थगित स्क्रिप्ट चलाता है।
A DOMContentLoadedको उस documentसमय भेजा जाता है जब सभी HTML को पार्स कर दिया गया हो और चला गया हो। इस घटना के लिए बुलबुले window।
ब्राउज़र लोड घटनाओं में देरी करने वाले संसाधनों (छवियों की तरह) को लोड करता है।
एक loadघटना पर भेजा जाता है window।

इसलिए, निष्पादन का आदेश होगा

DOMContentLoadedwindowकब्जा चरण में घटना श्रोताओं
DOMContentLoaded के श्रोता document
DOMContentLoadedwindowबुलबुला चरण के घटना श्रोताओं
loadईवेंट श्रोता ( onloadइवेंट हैंडलर सहित )window

बबल loadइवेंट श्रोता ( onloadइवेंट हैंडलर सहित ) documentको कभी भी आमंत्रित नहीं किया जाना चाहिए। केवल कैप्चर किए गए loadश्रोताओं को आमंत्रित किया जा सकता है, लेकिन स्टाइलशीट जैसे उप-संसाधन के लोड के कारण, दस्तावेज़ के लोड के कारण नहीं।

window.addEventListener('DOMContentLoaded', function() {
  console.log('window - DOMContentLoaded - capture'); // 1st
}, true);
document.addEventListener('DOMContentLoaded', function() {
  console.log('document - DOMContentLoaded - capture'); // 2nd
}, true);
document.addEventListener('DOMContentLoaded', function() {
  console.log('document - DOMContentLoaded - bubble'); // 2nd
});
window.addEventListener('DOMContentLoaded', function() {
  console.log('window - DOMContentLoaded - bubble'); // 3rd
});

window.addEventListener('load', function() {
  console.log('window - load - capture'); // 4th
}, true);
document.addEventListener('load', function(e) {
  /* Filter out load events not related to the document */
  if(['style','script'].indexOf(e.target.tagName.toLowerCase()) < 0)
    console.log('document - load - capture'); // DOES NOT HAPPEN
}, true);
document.addEventListener('load', function() {
  console.log('document - load - bubble'); // DOES NOT HAPPEN
});
window.addEventListener('load', function() {
  console.log('window - load - bubble'); // 4th
});

window.onload = function() {
  console.log('window - onload'); // 4th
};
document.onload = function() {
  console.log('document - onload'); // DOES NOT HAPPEN
};

स्निपेट का विस्तार करें

— Oriol
स्रोत

मैंने आपका स्निपेट चलाया और document - load - captureवास्तव में ऐसा होता है, जो मेरी खोज में वह है जो मुझे उम्मीद थी कि दस्तावेज़ लोड मेरे लिए क्यों नहीं हो रहा है। विचित्र रूप से, यह असंगत है। कभी-कभी ऐसा प्रतीत होता है, कभी-कभी ऐसा नहीं होता है, कभी-कभी यह दो बार दिखाई देता है - लेकिन कभी ऐसा नहीं होता document - load - bubbleहै। मैं उपयोग नहीं करने का सुझाव दूंगा document load।

— एरर

@erroric अच्छा बिंदु। मैंने यह नहीं सोचा था कि loadबाहरी संसाधनों पर एक घटना भेजी जाती है। वह घटना बुलबुला नहीं है इसलिए यह आमतौर पर दस्तावेज़ पर नहीं पाया जाता है, लेकिन इसे कैप्चर चरण में होना चाहिए। ये प्रविष्टियाँ तत्वों <style>और <script>तत्वों के भार को संदर्भित करती हैं। मुझे लगता है कि एज उन्हें दिखाने के लिए सही है, और फ़ायरफ़ॉक्स और क्रोम गलत हैं।

— ओरोल

धन्यवाद ओरोल, useCaptureविकल्प ने मुझे कुछ नया सिखाया।

— पॉल वॉटसन

W3 से पार्सिंग और प्रतिपादन प्रवाह को संक्षेप करने के लिए धन्यवाद। मुझे आश्चर्य है कि चरण 4 के बाद एक बार 'लोड' घटना को निकाल दिया जाता है, और क्या हो सकता है? मैंने अपने ब्राउज़र पर देखा कि कभी-कभी लोड की घटना के बाद भी कुछ वस्तुएं निकाली जाती हैं, हालाँकि मुझे पृष्ठ से बिल्कुल भी छुआ या इंटरैक्ट नहीं किया गया है। क्या आप जानते हैं उन वस्तुओं को क्या कहा जाता है? 'नॉन-ब्लॉकिंग रेंडरिंग ऑब्जेक्ट्स?

— weefwefwqg3

12

क्रोम में, window.onload अलग है <body onload="">, जबकि वे फ़ायरफ़ॉक्स (संस्करण 35.0) और IE (संस्करण 11) दोनों में समान हैं।

आप निम्नलिखित स्निपेट द्वारा पता लगा सकते हैं:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!--import css here-->
        <!--import js scripts here-->

        <script language="javascript">

            function bodyOnloadHandler() {
                console.log("body onload");
            }

            window.onload = function(e) {
                console.log("window loaded");
            };
        </script>
    </head>

    <body onload="bodyOnloadHandler()">

        Page contents go here.

    </body>
</html>

और आपको क्रोम कंसोल में "विंडो लोडेड" (जो सबसे पहले आता है) और "बॉडी ऑनलोड" दोनों दिखाई देंगे। हालाँकि, आप फ़ायरफ़ॉक्स और IE में सिर्फ "बॉडी ऑनलोड" देखेंगे। यदि आप window.onload.toString()IE और FF के कंसोल में " " चलाते हैं , तो आप देखेंगे:

"फंक्शन ओनलोड (घटना) {bodyOnloadHandler ()}"

जिसका अर्थ है कि असाइनमेंट "window.onload = function (e) ..." अधिलेखित है।

— VincentZHANG
स्रोत

6

window.onloadऔर onunloadकर रहे हैं के लिए शॉर्टकट document.body.onloadऔरdocument.body.onunload

document.onloadऔर onloadसभी HTML टैग पर हैंडलर आरक्षित होने लगता है लेकिन कभी ट्रिगर नहीं होता है

' onload' दस्तावेज़ में -> सच है

— garaboncias
स्रोत

5

window.onload हालांकि वे अक्सर एक ही बात कर रहे हैं। इसी तरह body.onload IE में window.onload बन जाता है।

— AnthonyWJones
स्रोत

1

Window.onload मानक है, हालाँकि - PS3 (Netfront पर आधारित) में वेब ब्राउज़र विंडो ऑब्जेक्ट का समर्थन नहीं करता है, इसलिए आप वहां इसका उपयोग नहीं कर सकते।

— gotofritz
स्रोत

0

संक्षेप में

windows.onloadहै आईई द्वारा समर्थित नहीं 6-8
document.onload किसी भी आधुनिक ब्राउज़र द्वारा समर्थित नहीं है (ईवेंट को कभी भी बंद नहीं किया गया है)

कोड स्निपेट दिखाएं

window.onload   = () => console.log('window.onload works');   // fired
document.onload = () => console.log('document.onload works'); // not fired

स्निपेट का विस्तार करें

— कामिल कियॉलेजवस्की
स्रोत

window.onload vs document.onload

वे कब आग लगाते हैं?

वे कितनी अच्छी तरह से समर्थित हैं?

Update March 2017

1 वेनिला जावास्क्रिप्ट

2 jQuery के

`Update March 2017`