आलसी लिपि लोडिंग आलसी? (या आलसी लोडिंग बाहरी जेएस सामग्री पहले से निकाल दी गई घटनाओं पर निर्भर है)

Question

मैं अपने उपयोगकर्ताओं के लिए addthis विजेट उपलब्ध करना चाहता हूं, लेकिन मैं इसे आलसी लोड करना चाहता हूं ताकि मेरा पृष्ठ जितनी जल्दी हो सके लोड हो। हालांकि, इसे एक स्क्रिप्ट टैग के माध्यम से कोशिश करने के बाद और फिर मेरी आलसी लोडिंग विधि के माध्यम से, यह केवल स्क्रिप्ट टैग के माध्यम से काम करता प्रतीत होता है। Obfuscated कोड में, मुझे कुछ ऐसा लगता है जो ऐसा लगता है कि यह DOMContentLoaded ईवेंट (कम से कम फ़ायरफ़ॉक्स के लिए) पर निर्भर है।

चूंकि DOMContentLoaded ईवेंट पहले ही निकाल दिया गया है, विजेट ठीक से प्रस्तुत नहीं करता है। क्या करें?

मैं सिर्फ एक स्क्रिप्ट टैग (धीमी) का उपयोग कर सकता हूं ... या क्या मैं DOMContentLoaded (या समकक्ष) ईवेंट को आग (क्रॉस ब्राउज़र तरीके से) कर सकता हूं? मुझे लगता है कि यह संभव नहीं हो सकता है बी/सी मुझे विश्वास है कि (jQuery की तरह) सामग्री तैयार घटना के कई परीक्षण हैं, और इसलिए कई अनुरूपित घटनाएं होनी चाहिए।

फिर भी, यह एक दिलचस्प समस्या है b/c मैंने कुछ विजेट्स को देखा है अब मान लें कि आप स्थिर स्क्रिप्ट टैग के माध्यम से अपनी सामग्री शामिल कर रहे हैं। यह अच्छा होगा अगर उन्होंने कोड लिखा जो गति के बारे में चिंतित डेवलपर्स के लिए अधिक उपयोगी था, लेकिन तब तक, क्या वहां कोई काम है ?? और/या मेरी कोई धारणा गलत है?

संपादित करें: क्योंकि सवाल का पहला जवाब मेरी समस्या के बिंदु को याद करने लग रहा था, मैं स्थिति को स्पष्ट करना चाहता था।

यह एक विशिष्ट समस्या के बारे में है। मैं अभी तक एक और आलसी लोड स्क्रिप्ट नहीं ढूंढ रहा हूं या जांच करता हूं कि कुछ निर्भरताएं स्क्रिप्ट लोड हैं या नहीं। विशेष रूप इस समस्या

1. बाहरी विजेट है कि आप पर नियंत्रण है और या जब तक वे या कम से कम जरूरत है बाहरी विजेट का लोड देरी समझ से परे नहीं किया जा सकता
2. नहीं है के साथ सौदों अन्य सभी के बाद अन्य अन्य स्थगित तत्वों सहित
3. बी/सी कैसे विजेट लिखा गया था,को रोकता है 63,210 मौजूदा, ठेठ आलसी लोड हो रहा है मानदंड

हालांकि यह गूढ़ है, मैंने देखा है यह एक जोड़े विगेट्स के साथ हो - जहां विजेट डेवलपर्स को लगता है कि तुम सिर्फ के तल पर एक और स्क्रिप्ट टैग में फेंक करने को तैयार हैं पृष्ठ। मैं उन 500-1000 एमएस को बचाने के लिए देख रहा हूं ** हालांकि याहू, गूगल और अमेज़ॅन द्वारा कई अध्ययनों से यह आपके उपयोगकर्ता के अनुभव के लिए महत्वपूर्ण साबित होता है।

** हथौड़ा और व्यक्तिगत अनुभव के साथ मेरा परीक्षण इंगित करता है कि यह इस मामले में मेरी बचत होगी।

Answer 1

चलाते हैं तो यह कोड समस्या का हल और लोड हो रहा है समय की बचत होती है कि मैं को ढूंढ रहा था।

इस post को पढ़ने के बाद कैसे वर्तमान जेएस पुस्तकालय एक डोम लोडेड ईवेंट के लिए परीक्षण लागू करते हैं। मैंने obfuscated कोड के साथ कुछ समय बिताया, और मैं यह निर्धारित करने में सक्षम था कि addthis विभिन्न ब्राउज़रों के लिए उल्लिखित डॉस्कोल विधि, टाइमर, और DOMContentLoaded घटना के संयोजन का उपयोग करता है। के बाद से ही उन ब्राउज़रों DOMContentLoaded घटना पर निर्भर कोड निम्नलिखित वैसे भी आवश्यकता होगी:

if(document.createEvent) { 
var evt = document.createEvent("MutationEvents"); 
evt.initMutationEvent("DOMContentLoaded", true, true, document, "", "", "", 0); 
document.dispatchEvent(evt); 
} 

और बाकी कुछ गुण के अस्तित्व के लिए टाइमर के परीक्षण पर निर्भर करते हैं, मैं केवल इस एक मामले को समायोजित करने के आलसी लोड करने के लिए सक्षम होना था स्थिर स्क्रिप्ट टैग का उपयोग करने के बजाय यह बाहरी जेएस सामग्री, इस प्रकार उस समय को बचा रहा है जिसकी मैं उम्मीद कर रहा था। :)

Answer 2

संपादित करें: यदि लक्ष्य केवल आपके अन्य contetn लोड को रखने के लिए है, तो अपने पृष्ठ के नीचे <script> टैग डालने का प्रयास करें। यह अभी भी DOMContentLoaded को पकड़ने में सक्षम होगा और पहले आने वाली सामग्री को स्क्रिप्ट से पहले लोड किया जाएगा।

मूल:

DOMContentLoaded पर लोड हो रहा है के अलावा, आप इसे लोड एक निश्चित वर सच सेट है, तो हो सकता था। जैसे

var isDOMContentLoaded = false; 

document.addEventListener("DOMContentLoaded",function() { isDOMContentLoaded = true; }, false); 

तो टिप्पणी के जवाब में अन्य स्क्रिप्ट फ़ाइल

if (isDOMContentLoaded) loadThisScript(); 

संपादित करने के लिए जोड़ें:

लोड स्क्रिप्ट, और समारोह है कि DOMContentLoaded श्रोता आग चलाते हैं। ( स्क्रिप्ट पढ़ें यदि आप सुनिश्चित नहीं हैं कि कौन सा फ़ंक्शन कहा जा रहा है)।

उदा।

var timerID; 
var iteration=0; 

function checkAndLoad() { 
    if (typeof loadThisScript != "undefined") { 
     clearInterval(timerID); 
     loadThisScript(); 
    } 
    iteration++; 
    if (iteration > 59) clearInterval(timerID); 
} 

var extScript = document.createElement("script"); 
extScript.setAttribute("src",scriptSrcHere); 
document.head.appendChild(extScript); 

timerID = setInterval(checkAndLoad,1000); 

ऊपर एक बार कोशिश करते हैं, अगर आप की जरूरत समारोह उपलब्ध है 60 सेकंड के लिए एक दूसरे की जाँच करने के लिए, और, यदि ऐसा है तो यह

Answer 3

सबसे आसान समाधान पैरामीटर domready से 1 को सेट करना है जब आपके पृष्ठ में एडिथिस स्क्रिप्ट एम्बेड करना। यहां एक उदाहरण दिया गया है:

<script type="text/javascript" 
src="http://s7.addthis.com/js/250/addthis_widget.js#username=addthis&domready=1"> 
</script> 

मैंने आईई, फ़ायरफ़ॉक्स, क्रोम और सफारी पर इसका परीक्षण किया है, और सभी ठीक काम करते हैं। Addthis कॉन्फ़िगरेशन पैरामीटर पर अधिक जानकारी here उपलब्ध है।