本文让js动态加载,这样原本串行加载的js就变成并行了。
先看两个demo
demo_00:http://www.zhangjingwei.com/loadscript/demo_00/

再看demo_01:http://www.zhangjingwei.com/loadscript/demo_01/

很明显,demo_01中,js异步加载,没有阻挡图片的下载
让我们看看他是如何实现的。
var loadscript =
{
$$:function(id){return document.getElementById(id)},
tag:function(element){return document.getElementsByTagName(element)},
ce:function(element){return document.createElement(element)},
js:function(url)
{
s = loadscript.ce('script');
s.type = "text/javascript";
s.onreadystatechange = ready;
s.onerror = s.onload = complete;
s.src = url;
loadscript.tag('head')[0].appendChild(s);
function ready(){}
function complete(){}
}
}
代码很简单,但我们忽略了一个很重要的问题。
虽然JS是异步加载了,但他们下载的顺序却不确定,万一B先与A加载,并且B调用了A内的函数呢?
这种情况在IE里经常出现。

2->1->3->4->6->5 就是这些js的加载顺序,现在我们想让他们变成1->2->3->4->5->6。怎么办?
我们增加一个回调,让他在第一个加载完成后再加载第二个。
var loadscript =
{
$$:function(id){return document.getElementById(id)},
tag:function(element){return document.getElementsByTagName(element)},
ce:function(element){return document.createElement(element)},
js:function(url,callback)
{
s = loadscript.ce('script');
s.type = "text/javascript";
s.onreadystatechange = ready;
s.onerror = s.onload = callback;
s.src = url;
loadscript.tag('head')[0].appendChild(s);
function ready(){
if (s.readyState == 'loaded' || s.readyState == 'complete') {
callback();
}
};
}
}
这样写得到了我们想要的结果。
demo_02:http://www.zhangjingwei.com/loadscript/demo_02/

可是加载它的方法很臃肿。
loadscript.js('js1.js',function(){
loadscript.js('js2.js',function(){
loadscript.js('js3.js',function(){
loadscript.js('js4.js',function(){
loadscript.js('js5.js',function(){
loadscript.js('js6.js',function(){
});
});
});
});
});
});
改进一下 (同步加载)
demo_03:http://www.zhangjingwei.com/loadscript/demo_03/
var loadscript =
{
$$:function(id){return document.getElementById(id)},
tag:function(element){return document.getElementsByTagName(element)},
ce:function(element){return document.createElement(element)},
ls:function (url){
var req = this.createXmlHttp();
req.open('GET',url, false);
req.send(null);
//alert (req.status);
if (req.status == 200 || req.status == 0) {
window.eval(req.responseText);
};
},
createXmlHttp: function (){
var xmlHttp;
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if (window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}
}
看看效果如何。

js确实是串行下载了,可问题又来了,因为是同步加载又将图片的加载阻止了。
鱼与熊掌不可兼得么?有知道的朋友还请留言赐教。
干活去了!