javascript - 异步加载 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();
}