我知道我对这个问题的回答有点晚,但是,这是www.html5rocks.com上的一篇很棒的文章- 深入探究脚本加载的阴暗水域。
在该文章中得出的结论是,关于浏览器支持,动态加载JavaScript文件而不阻止内容呈现的最佳方法是以下方法:
考虑到您已经命名了四个脚本,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);
});
现在,Spec说:一起下载,全部下载后立即执行。
Firefox <3.6,Opera说:我不知道这个“异步”是什么,但是恰好发生在我按照添加顺序执行通过JS添加的脚本的过程中。
Safari 5.0说:我了解“异步”,但不了解使用JS将其设置为“假”。脚本登陆后,我将以任何顺序执行它们。
IE <10说:没有关于“异步”的想法,但是有一种使用“ 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"
])