异步加载js脚本-确保它们按正确的顺序加载。

Question

我试图异步加载js文件，代码如下：

function load_js() {
    var scripts = [
        'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js',
        'http://code.jquery.com/ui/1.10.2/jquery-ui.min.js',
        '/js/libs/joose.min.js',
        '/js/observer.js',
        '/js/resume-library.js'
    ];

    for( var i = 0; i < scripts.length; i++){
        var element = document.createElement("script");
        element.src = scripts[i];
        document.body.appendChild(element);
    }
}
if (window.addEventListener)
    window.addEventListener("load", load_js, false);
else if (window.attachEvent)
    window.attachEvent("onload", load_js);
else window.onload = load_js;

但是，顺序并不总是遵循数组的顺序，有时加载文件可能需要更长的时间等。

如何保证文件将按数组的顺序加载？

Answer 1

尝尝这个。它使用来自http://msdn.microsoft.com/en-us/library/ie/hh180173%28v=vs.85%29.aspx的方法来附加到脚本加载后调用的事件。

function load_js() {
    var scripts = [
        'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js',
        'http://code.jquery.com/ui/1.10.2/jquery-ui.min.js',
        '/js/libs/joose.min.js',
        '/js/observer.js',
        '/js/resume-library.js'
    ];


    function loadNext(){
        var src = scripts.shift();
        if (typeof src === 'undefined')
           return;

        var s = document.createElement("script");

        s.src=src;
        if(s.addEventListener) {
          s.addEventListener("load",loadNext,false);
        } 
        else if(s.readyState) {
          s.onreadystatechange = loadNext;
        }
        document.body.appendChild(s);
       }
    }

   loadNext();
}

Answer 2

这不是经过测试的，但应该是解决办法，

我创建了一个设置src并追加脚本并触发回调的函数，然后只有在回调触发时才会继续遍历脚本，因此这种方式应该是相同的顺序。

function appendScript(src,callback){
        var element = document.createElement("script");
       element.src = src;
       document.body.appendChild(element);

       element.onload=function(){
        callback();
       }
}


var i = 0;
var loopScripts = function(scripts) {
    appendScript(scripts[i],function(){
        // set i to next item when callback gets called
        i++;

        // any more items in array? continue loop
        if(i < scripts.length) {
            loopScripts(scripts);   
        }
    }); 
}



function load_js() {
   var scripts = [
       'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js',
       'http://code.jquery.com/ui/1.10.2/jquery-ui.min.js',
       '/js/libs/joose.min.js',
       '/js/observer.js',
       '/js/resume-library.js'
   ];

   //start the loop
   loopScripts(scripts);
}

测试过了，这个很好用！但是，如果脚本不可用，则需要实现->，因为循环不会继续。