javascript - best way of dynamic script loading

Question

I need to load some js files dynamically and sequentially(i.e. second script loads after load complete of first one, third after second and so on).

Question: how to detect when a script have been loaded? I have encountered problems with onload event - it not fires in IE8. After reading this, I tried to subscribe to onreadystatechange and wrote very ugly code for loading a script:

function loadScript(url, callback) {
        var isLoaded = false;
        var script = document.createElement('script');

        script.onreadystatechange = function () {
            if ((script.readyState == 'complete' || script.readyState == 'loaded') && !isLoaded) {
                if (callback) callback();
            }
        };
        script.setAttribute('type', 'text/javascript');
        script.setAttribute('src', url);
        document.head.appendChild(script);
    };

Can you suggest better cross browser solution without such tricks?

UPD: Thanks for answers. What should I do if I need also to load jquery.js(for example, client have old version) :)?

Answer 1

I think what you need is jQuery.getScript

The function takes a URL and a success method with which you can chain loading of scripts and therefore load them sequentially:

jQuery.getScript( url, function() { 
  jQuery.getScript( url2, function() 
    {/*... all 2 scripts finished loading */}
  );
});