async loading js scripts - guarantee they load in right order

Question

I'm trying to load my js files asynchronously, with the code:

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;

but, the order doesnt always follow the order of the array, sometimes a file may take longer to load etc.

how can i guarantee that the files will load in the order of the array?

sorry might not be clear - I mean async as in they don't block the document loading/ rendering, but I still need to ensure the order of the script load, e.g jquery has to load first — rpsep2
– rpsep2, Commented Jun 17, 2014 at 16:31

Malk · Accepted Answer · 2014-06-17 16:39:41Z

Try this. It is using the method from http://msdn.microsoft.com/en-us/library/ie/hh180173%28v=vs.85%29.aspx to attach to the event called once a script is loaded.

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();
}

john Smith · Accepted Answer · 2014-06-17 16:51:01Z

This is not tested but should be the solution ,

i made a function that sets the src and appends the script and triggers a callback, then i have a function that continues looping through scripts only when the callback triggers, so this way it should be the same order

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);
}

tested it, this works pretty fine ! but you need to implement the case if the script is not available -> because then the loop wont continue

Collectives™ on Stack Overflow

async loading js scripts - guarantee they load in right order

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related