DOMContentLoaded और लोड घटनाओं के बीच अंतर

Question

बीच क्या अंतर है DOMContentLoadedऔर loadघटनाओं?

Comments

एक अच्छा लेख - पृष्ठ जीवनचक्र: DOMContentLoaded, लोड, पहले लोड, अनलोड ।

— georgeawg

Answer 1

से मोज़िला डेवलपर केंद्र :

DOMContentLoaded घटना को निकाल दिया जाता है, जब दस्तावेज़ को पूरी तरह से लोड और पार्स किया गया है, लोडिंग खत्म करने के लिए स्टाइलशीट, छवियों और सबफ़्रेमियों के लिए प्रतीक्षा किए बिना (लोड घटना का उपयोग पूरी तरह से लोड किए गए पृष्ठ का पता लगाने के लिए किया जा सकता है)।

Comments

Fyi, वही MDN लिंक [अब] यह भी कहता है: "नोट: स्टाइल्सशीट ब्लॉक स्क्रिप्ट निष्पादन को लोड करता है, इसलिए यदि आपके पास <लिंक rel =" स्टाइलशीट "...> के बाद एक <script> है, तो पृष्ठ पार्स करना समाप्त नहीं करेगा - और DOMContentLoaded फायर नहीं करेगी - जब तक कि स्टाइलशीट लोड न हो जाए। ”

— Nick

@ क्लिक करें यह पृष्ठ कारण देता है। html5rocks.com/hi/tutorials/internals/howbrowserswork मैं पृष्ठ में वीडियो देखने की सिफारिश करूंगा।

— अबीसेकप

@abhisekp अच्छा ट्यूटोरियल हालांकि वह वीडियो लिंक अब अप्रचलित है

— supi

DOMContentLoaded को निकाल देने के बाद रेंडर ट्री बनाया गया है। लेकिन DOMContentLaded डेवलपर . mozilla.org/en-US/docs/Web/API/Window/… के अनुसार लोडिंग समाप्त करने के लिए छवियों / उप-संसाधनों / सबफ़्रेमियों की प्रतीक्षा नहीं करता है । क्या आप जानते हैं कि ये चित्र / सबफ़्रेम / उप संसाधन रेंडर ट्री द्वारा निर्मित होने के बाद कहे जाते हैं, या क्या उन्हें पहले ही DOM ट्री द्वारा बुलाया गया था जबकि रेंडर ट्री अभी भी बनाया जा रहा था? दूसरे शब्दों में, क्या रेंडर ट्री इन इमेजेज / सबफ्रेम / सबसोर्स को डाउनलोड करने के लिए कनेक्शन का एक गुच्छा चलाता है या उनके डाउनलोड पहले से ही प्रगति पर थे?

— weefwefwqg3

Answer 2

DOMContentLoadedईवेंट को सक्रिय जैसे ही डोम पदानुक्रम पूरी तरह से निर्माण किया गया है, होगा loadघटना यह करना होगा जब सभी छवियों और उप-फ़्रेम समाप्त लोड हो रहा है है।

DOMContentLoadedअधिकांश आधुनिक ब्राउज़रों पर काम करेंगे, लेकिन IE पर IE9 और इसके बाद के संस्करण सहित नहीं । IE के पुराने संस्करणों पर इस घटना की नकल करने के लिए कुछ वर्कअराउंड हैं , जैसे कि jQuery लाइब्रेरी पर उपयोग किया जाता है, वे IE विशिष्ट onreadystatechange इवेंट को संलग्न करते हैं ।

Comments

जब आप "यह घटना" कहते हैं, तो आप किस घटना का उल्लेख कर रहे हैं?

— टॉम हबर्ड

"यह घटना" = DOMContentLoaded। यह IE8 में काम नहीं करता है। यदि आपको इसका समर्थन करने की आवश्यकता है तो वर्कअराउंड का उपयोग करें जो CMS से लिंक करता है

— Jan Derk

Answer 3

अंतर खुद देखें:

डेमो

से Microsoft IE

DOMContentLoaded घटना वर्तमान पृष्ठ के पार्सिंग पूर्ण होने पर आग लग जाती है; जब सभी फाइलें विज्ञापनों और चित्रों सहित सभी संसाधनों से लोडिंग समाप्त कर देती हैं, तो लोड घटना की आग लग जाती है। DOMContentLoaded जटिल वेब पेजों के लिए UI कार्यक्षमता का उपयोग करने के लिए एक शानदार घटना है।

से मोज़िला डेवलपर नेटवर्क

DOMContentLoaded घटना को निकाल दिया जाता है, जब दस्तावेज़ को पूरी तरह से लोड और पार्स किया गया है, लोडिंग खत्म करने के लिए स्टाइलशीट, छवियों और सबफ़्रेमियों के लिए प्रतीक्षा किए बिना (लोड घटना का उपयोग पूरी तरह से लोड किए गए पृष्ठ का पता लगाने के लिए किया जा सकता है)।

Comments

क्या DOMContentLoadedगारंटी है कि सभी लिपियों (डिफर / एस्किंक सहित) को लोड किया गया है? लिपियों के बारे में यहाँ कुछ नहीं कहा गया है: developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

— सर्गेई

@ सेर्गेई नोप। async संसाधन - अर्थात <स्क्रिप्ट async src = app.js /> - शेष पेज से स्वतंत्र रूप से लोड किए जाते हैं इसलिए DOMContentLoaded को सर्वर से संसाधन प्राप्त करने से पहले ट्रिगर हो सकता है

— Mehrad Sadegh

@MehradSadegh मुझे लगता है कि आप गलत हैं! से MDN दस्तावेजीकरण : आस्थगित करें विशेषता के साथ स्क्रिप्ट फायरिंग जब तक स्क्रिप्ट लोड और मूल्यांकन समाप्त हो गया है से DOMContentLoaded घटना नहीं कर पाएगा। आप इस SO प्रश्न पर एक नज़र डाल सकते हैं, जो इसकी पुष्टि करता है: stackoverflow.com/questions/42950574/…

— radzak

@ जतिमीर मुझे लगता है कि अलग करना और async विशेषताओं का अलग व्यवहार है।

— महरादे सादघ

@ जतिमीर ग्लैड आपने वैसे भी पोस्ट किया, क्योंकि आपका योगदान बिल्कुल सही था, मैं क्या देख रहा था! धन्यवाद!

— रॉबर्ट वाइल्डलिंग

Answer 4

DOMContentLoaded==window.onDomReady()

Load==window.onLoad()

दस्तावेज़ तैयार होने तक किसी पृष्ठ को सुरक्षित रूप से हेरफेर नहीं किया जा सकता है। jQuery आपके लिए इस तत्परता की स्थिति का पता लगाता है। $ (दस्तावेज़) (।) के अंदर शामिल कोड केवल तभी चलेगा जब पृष्ठ दस्तावेज़ ऑब्जेक्ट मॉडल (DOM) जावास्क्रिप्ट कोड को निष्पादित करने के लिए तैयार हो। $ (विंडो) (लोड) (फंक्शन () {...}) के अंदर शामिल कोड एक बार पूरे पृष्ठ (चित्र या आइफ्रेम्स) पर चलेगा, न कि केवल DOM, तैयार है।

देखें: http://learn.jquery.com/using-jquery-core/document-ready/

Comments

सवाल jQuery के बारे में नहीं है।

— user34660

@ user34660 यह नहीं है, लेकिन समझने में मददगार है।

— एंडरसन

Answer 5

• domContentLoaded : बिंदु को चिन्हित करता है जब दोनों DOM तैयार है और कोई स्टाइलशीट नहीं है जो JavaScript निष्पादन को रोक रही है - जिसका अर्थ है कि हम अब (संभवतः) रेंडर ट्री का निर्माण कर सकते हैं। कई जावास्क्रिप्ट फ्रेमवर्क इस घटना की प्रतीक्षा करते हैं इससे पहले कि वे अपने स्वयं के तर्क को निष्पादित करना शुरू कर दें। इस कारण से ब्राउज़र ईवेंटस्टार्ट और ईवेंट टाइमस्टैम्प को हमें ट्रैक करने की अनुमति देता है और यह ट्रैक करने में कितना समय लगा।

• loadEvent : हर पेज में एक अंतिम चरण के रूप में ब्राउज़र लोड करता है एक "ऑनलोड" घटना जो अतिरिक्त एप्लिकेशन लॉजिक को ट्रिगर कर सकता है।

स्रोत

Comments

अगर मेरे पास JS के साथ कोई स्क्रिप्ट टैग है, तो क्या वे domContentLoaded से पहले या बाद में लोड करेंगे?

— पावन

Answer 6

यहाँ कुछ कोड है जो हमारे लिए काम करता है। हमने पाया कि MSIE को हिट और मिस किया DomContentLoadedजा सकता है, कोई देरी हो जाती है जब कोई अतिरिक्त संसाधन कैश नहीं किया जाता है (हमारे कंसोल लॉगिंग के आधार पर 300ms तक), और यह कैश होने पर बहुत तेजी से ट्रिगर होता है। इसलिए हमने MISE के लिए कमबैक का सहारा लिया। आप doStuff()फ़ंक्शन को ट्रिगर करना चाहते हैं चाहे DomContentLoadedआपकी बाहरी जेएस फ़ाइलों से पहले या बाद में ट्रिगर हो।

// detect MSIE 9,10,11, but not Edge
ua=navigator.userAgent.toLowerCase();isIE=/msie/.test(ua);

function doStuff(){
    //
}
if(isIE){
    // play it safe, very few users, exec ur JS when all resources are loaded
    window.onload=function(){doStuff();}
} else {
    // add event listener to trigger your function when DOMContentLoaded
    if(document.readyState==='loading'){
        document.addEventListener('DOMContentLoaded',doStuff);
    } else {
        // DOMContentLoaded already loaded, so better trigger your function
        doStuff();
    }
}