DOMContentLoaded या लोड ईवेंट हैंडलर के साथ Async-loaded स्क्रिप्ट्स को नहीं कहा जा रहा है?

Question

मैं एक DOMContentLoaded घटना के साथ एक स्क्रिप्ट

document.addEventListener('DOMContentLoaded', function() { 
    console.log('Hi'); 
}); 

handler- कौन सा मैं asynchronously-

<script async src=script.js></script> 

हालांकि, ईवेंट हैंडलर कहा जाता है कभी नहीं है लोड हो रहा है कर रहा हूँ मिल गया है। अगर मैं इसे तुल्यकालिक रूप से लोड करता हूं-

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

यह ठीक काम करता है।

(यहां तक ​​कि अगर मैं एक load घटना के लिए DOMContentLoaded घटना बदलने के लिए, यह कभी नहीं कहा जाता है।)

क्या देता है? ईवेंट हैंडलर को पंजीकृत किया जाना चाहिए चाहे ब्राउजर द्वारा स्क्रिप्ट कैसे लोड की जाती है, नहीं?

संपादित: यह DOMContentLoaded साथ क्रोम 18.0.1025.11 बीटा पर काम नहीं करता है, लेकिन, यह फ़ायरफ़ॉक्स 11 बीटा पर करता है (लेकिन load साथ ऐसा नहीं होता है)। जाओ पता लगाओ।

ओएच महान भगवान और जावा के भगवान, प्रार्थना मेरे तरीके की गलती दिखाओ!

Answer 1

स्क्रिप्ट को असीमित रूप से लोड करके, आप ब्राउज़र को बता रहे हैं कि यह पृष्ठ के अन्य हिस्सों से स्वतंत्र रूप से उस स्क्रिप्ट को लोड कर सकता है। इसका मतलब है कि पृष्ठ लोड हो सकता है और DOMContentLoaded आग लग सकता है इससे पहले कि आपकी स्क्रिप्ट लोड हो और इससे पहले कि यह ईवेंट के लिए रजिस्टर्ड हो। यदि ऐसा होता है, तो आप ईवेंट को याद करेंगे (जब आप इसके लिए पंजीकरण करते हैं तो यह पहले से ही हुआ है)।

कुछ ब्राउज़रों में, आप यह देखने के लिए दस्तावेज़ का परीक्षण कर सकते हैं कि यह पहले से लोड हो चुका है या नहीं। मैं सभी ब्राउज़र संगतता की जाँच नहीं की है, लेकिन फ़ायरफ़ॉक्स में 3.6+ (MDN doc), तो आप देख सकते हैं: अगर दस्तावेज़ पहले से ही भरी हुई है

if (document.readyState !== "loading") 

को देखने के लिए। यदि ऐसा है, तो बस अपना व्यवसाय करें। यदि ऐसा नहीं है, तो अपने ईवेंट श्रोता इंस्टॉल करें।

वास्तव में, एक संदर्भ स्रोत और कार्यान्वयन विचार के रूप में, jQuery .ready() विधि के साथ यह वही काम करता है और यह व्यापक रूप से समर्थित दिखता है। jQuery में यह कोड है जब .ready() कहा जाता है कि पहले यह जांचने के लिए जांच की जाती है कि दस्तावेज़ पहले ही लोड हो चुका है या नहीं। यदि हां, तो यह घटना श्रोता बंधन से तुरंत नहीं बल्कि तैयार फ़ंक्शन को कॉल:

// Catch cases where $(document).ready() is called after the 
// browser event has already occurred. 
if (document.readyState === "complete") { 
    // Handle it asynchronously to allow scripts the opportunity to delay ready 
    return setTimeout(jQuery.ready, 1); 
} 

Answer 2

यह अंतिम जवाब नहीं है, लेकिन मुझे समझ में क्यों एक स्क्रिप्ट डोम संशोधित करने की आवश्यकता है कि साथ async का उपयोग कर सही नहीं है बना दिया है, तो चाहिए DOMContentLoaded ईवेंट की प्रतीक्षा करें। उम्मीद फायदेमंद हो सकती है।

(स्रोत: Running Your Code at the Right Time from kirupa.com) इस के आसपास

Answer 3

एक तरह से खिड़की वस्तु पर लोड घटना का प्रयोग है।

यह बाद में DOMContentLoaded से होगा, लेकिन कम से कम आपको घटना को याद करने की चिंता करने की आवश्यकता नहीं है।

window.addEventListener("load", function() { 
    console.log('window loaded'); 
}); 

यदि आपको वास्तव में DOMContentLoaded ईवेंट को पकड़ने की आवश्यकता है तो आप वादा ऑब्जेक्ट का उपयोग कर सकते हैं। वादा का समाधान हो जाएगा, भले ही वह पहले हो:

HTMLDocument.prototype.ready = new Promise(function (resolve) { 
if (document.readyState != "loading") 
    return resolve(); 
else 
    document.addEventListener("DOMContentLoaded", function() { 
     return resolve(); 
    }); 
}); 

document.ready.then(function() { 
    console.log("document ready"); 
});