Dynamic, cross-browser script loading

I know that IE doesn't have a load event for <script> elements — is there any way to make up for that reliably?

I've seen some talk of things (e.g., requestState == "complete") but nothing very verifiable.

This is to be used so that code can be called after a script is finished loading, so that I don't have to use AJAX to load new sources (thus eliminating issues with cross-domain AJAX).


You can use a script loader like head.js. It has its own load callback and it will decrease load time too.

From the headjs code: (slightly modified to be more portable)

function scriptTag(src, callback) {

    var s = document.createElement('script');
    s.type = 'text/' + (src.type || 'javascript');
    s.src = src.src || src;
    s.async = false;

    s.onreadystatechange = s.onload = function () {

        var state = s.readyState;

        if (!callback.done && (!state || /loaded|complete/.test(state))) {
            callback.done = true;

    // use body if available. more safe in IE
    (document.body || head).appendChild(s);

I want to add that if you don't support IE7 and below, you don't need onreadystatechange stuff. Source: quircksmode.org

Simplified and working code from original answer:

function scriptTag (src, callback) {

   // src is just a string now!

    var s = doc.createElement('script');
    s.type = 'text/javascript';
    s.src = src;
    s.async = false;
    s.onload = callback;        

This is just an extension of ilia's answer. I used scriptTag like this: Works great:

    // these 3 scripts load serially.

        // jquery ready - set a flag
            // jqueryui ready - set a flag
                // your_app is ready! - set a flag

    // these 2 scripts load in paralell to the group above

        // crypto ready - set a flag

        // cropper ready - set a flag

Need Your Help