আমি জানি আমার উত্তরটি এই প্রশ্নের জন্য কিছুটা দেরিতে হয়েছে, তবে, এখানে www.html5rocks.com- এর একটি দুর্দান্ত নিবন্ধ দেওয়া হয়েছে - স্ক্রিপ্ট লোডিংয়ের ন্যক্কারজনক জলে গভীর ডুব ।
এই নিবন্ধে এটি সিদ্ধান্তে পৌঁছেছে যে ব্রাউজার সমর্থনের ক্ষেত্রে, সামগ্রী রেন্ডারিংকে অবরুদ্ধ না করেই জাভাস্ক্রিপ্ট ফাইলটি গতিশীলভাবে লোড করার সর্বোত্তম উপায়টি নিম্নরূপ:
আপনার চারটি স্ক্রিপ্টের নাম রেখে বিবেচনা করে আপনি script1.js, script2.js, script3.js, script4.jsএটি async = false প্রয়োগ করে করতে পারেন :
[
'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);
});
এখন, স্পেক বলছে : একসাথে ডাউনলোড করুন, যত তাড়াতাড়ি সমস্ত ডাউনলোডের সাথে ক্রম সম্পাদন করুন।
ফায়ারফক্স <3.6, অপেরা বলেছেন: এই "অ্যাসিঙ্ক" জিনিসটি কী তা আমার কোনও ধারণা নেই, তবে ঠিক তাই ঘটেছিল আমি জেএসের মাধ্যমে যুক্ত হওয়া স্ক্রিপ্টগুলি ক্রম হিসাবে চালিয়েছি।
সাফারি 5.0 বলেছেন: আমি "অ্যাসিঙ্ক" বুঝতে পারি, তবে জেএসের সাথে এটি "মিথ্যা" হিসাবে সেট করা বুঝতে পারি না। আমি আপনার স্ক্রিপ্টগুলি ল্যান্ড করার সাথে সাথেই তা কার্যকর করবো যাই হোক না কেন ক্রমে।
আইই <10 বলেছেন: "অ্যাসিঙ্ক" সম্পর্কে কোনও ধারণা নেই, তবে "অনড্রেসেটেচেনচ" ব্যবহার করে একটি কার্যকারিতা রয়েছে।
অন্য সব কিছুই বলেছেন: আমি আপনার বন্ধু, আমরা এটি বইয়ের মাধ্যমে করব।
এখন, আইই <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"
])