js异步加载的问题
js异步加载的问题
本地测试无任何问题,但是放到服务器上开始报错,经检查是js加载出现了异步问题.
当时采用的是动态加载js的方式,如下:
function loadJsFile(strFileName)
{
var oHead = document.getElementsByTagName('HEAD').item(0);
var oScript= document.createElement("script");
oScript.type = "text/javascript";
oScript.src = strFileName;
oHead.appendChild( oScript);
}
如果采用回调方式的话,由于加载的很多,会很麻烦
后来经过改动,添加了async 属性来保证不会出现异步.然而并没有什么卵用.
后来查资料发现
这种方式浏览器不保证文件加载的顺序。所有主流浏
览器之中,只有 Firefox 和 Opera 保证脚本按照你指定的顺序执行。其他浏览器将按照服务器返回它们的次
序下载并运行不同的代码文件。
发现问题所在,接着改...
不支持的话,就直接用script标签应该可以了吧
function loadJsFile(strFileName)
{
$('body').append ( '<script src="'+ strFileName+'"></'+'script>')
}
测试一下,发现异步问题暂时OK了
接下来就该头疼优化加载速度了…
下面附上异步解决方案
function loadScript(url, callback){
var script = document.createElement ("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName_r("head")[0].appendChild(script);
}
//多个文件的话这样加载
loadScript("file1.js", function(){
loadScript("file2.js", function(){
loadScript("file3.js", function(){
alert("All files are loaded!");
});
});
});
//是不是很头大,这才只是三个!!!