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!");
});
});
});
//是不是很头大,这才只是三个!!!