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

这未经过测试，但应该是解决方案，

我创建了一个设置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);
}

测试了它，这很好用！但是如果脚本不可用，你需要实现这个案例 - ＆gt;因为那时循环不会继续

Answer 2

试试这个。它使用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();
}

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

2 个答案: