मुझे पता है कि इस सवाल के लिए मेरा उत्तर थोड़ा देर से है, लेकिन, यहां www.html5rocks.com में एक शानदार लेख है - स्क्रिप्ट लोडिंग के पानी में गहरे गोता ।
उस लेख में यह निष्कर्ष निकाला गया है कि ब्राउज़र समर्थन के संबंध में, सामग्री प्रतिपादन को अवरुद्ध किए बिना जावास्क्रिप्ट फ़ाइल को गतिशील रूप से लोड करने का सबसे अच्छा तरीका निम्न प्रकार है:
आपके द्वारा नामित चार लिपियों को ध्यान में रखते हुए आप इसे async = false पर लागूscript1.js, script2.js, script3.js, script4.js कर सकते हैं :
[
'script1.js',
'script2.js',
'script3.js',
'script4.js'
].forEach(function(src) {
var script = document.createElement('script');
script.src = src;
script.async = false;
document.head.appendChild(script);
});
अब, Spec का कहना है : एक साथ डाउनलोड करें, सभी डाउनलोड होते ही क्रम में निष्पादित करें।
फ़ायरफ़ॉक्स <3.6, ओपेरा का कहना है: मुझे नहीं पता कि यह "async" बात क्या है, लेकिन यह सिर्फ इतना होता है कि मैं जेएस के माध्यम से जोड़े गए स्क्रिप्ट को निष्पादित कर रहा हूं ताकि वे जोड़ रहे हैं।
Safari 5.0 कहता है: मैं "async" को समझता हूं, लेकिन JS के साथ इसे "झूठे" पर सेट करना नहीं समझता। जैसे ही वे भूमि पर आएँगे, मैं आपकी लिपियों पर अमल करूँगा।
IE <10 कहते हैं: "async" के बारे में कोई विचार नहीं है, लेकिन "onreadystatechange" का उपयोग कर एक समाधान है।
बाकी सब कुछ कहता है: मैं तुम्हारा दोस्त हूं, हम किताब से ऐसा करने जा रहे हैं।
अब, IE <10 समाधान के साथ पूर्ण कोड:
var scripts = [
'script1.js',
'script2.js',
'script3.js',
'script4.js'
];
var src;
var script;
var pendingScripts = [];
var firstScript = document.scripts[0];
// Watch scripts load in IE
function stateChange() {
// Execute as many scripts in order as we can
var pendingScript;
while (pendingScripts[0] && pendingScripts[0].readyState == 'loaded') {
pendingScript = pendingScripts.shift();
// avoid future loading events from this script (eg, if src changes)
pendingScript.onreadystatechange = null;
// can't just appendChild, old IE bug if element isn't closed
firstScript.parentNode.insertBefore(pendingScript, firstScript);
}
}
// loop through our script urls
while (src = scripts.shift()) {
if ('async' in firstScript) { // modern browsers
script = document.createElement('script');
script.async = false;
script.src = src;
document.head.appendChild(script);
}
else if (firstScript.readyState) { // IE<10
// create a script and add it to our todo pile
script = document.createElement('script');
pendingScripts.push(script);
// listen for state changes
script.onreadystatechange = stateChange;
// must set src AFTER adding onreadystatechange listener
// else we’ll miss the loaded event for cached scripts
script.src = src;
}
else { // fall back to defer
document.write('<script src="' + src + '" defer></'+'script>');
}
}
कुछ तरकीबें और बाद में, यह 362 बाइट्स है
!function(e,t,r){function n(){for(;d[0]&&"loaded"==d[0][f];)c=d.shift(),c[o]=!i.parentNode.insertBefore(c,i)}for(var s,a,c,d=[],i=e.scripts[0],o="onreadystatechange",f="readyState";s=r.shift();)a=e.createElement(t),"async"in i?(a.async=!1,e.head.appendChild(a)):i[f]?(d.push(a),a[o]=n):e.write("<"+t+' src="'+s+'" defer></'+t+">"),a.src=s}(document,"script",[
"//other-domain.com/1.js",
"2.js"
])