Can script.readyState be trusted to detect the end of dynamic script loading?

Question

I use dynamic script loading to reduce the duration of the initial page load. To ensure that the functions and objects defined by a script are accessible, I need to ensure that the script has been fully loaded.

I have developed my own Javascript library to this end, and thus did quite a lot of research on the subject, studying how it's done in different libraries. During a discussion related to this issue, Kyle Simpson, the author of LABjs, stated that:

LABjs (and many other loaders) set both "onload" and "onreadystatechange" on all script elements, knowing that some browsers will fire one, and some will fire the other...

You can find an example of this in the source code of latest jQuery (or the current [as of this writing] v1.3.2):

// Attach handlers for all browsers
script.onload = script.onreadystatechange = function(){
    if ( !done && (!this.readyState ||
    this.readyState == "loaded" || this.readyState == "complete") ) {
        done = true;
        success();
        complete();

        // Handle memory leak in IE
        script.onload = script.onreadystatechange = null;
        head.removeChild( script );
    }
};

That's the state of the art, but during the analysis of a strange behavior in Opera 9.64, I came to the conclusion that, using this technique, the onload callback got fired too early.

I will post my own findings in answer to this question, and would like to gather further evidence and feedback from the community.

Answer 1

In Firefox, Safari and Chrome, the onreadystatechange handler nevers gets called.

I created a short test case, creating a dynamic script with only the onreadystatechange handler set:

<script type="text/javascript" language="javascript">
bezen.log.info(new Date(),true);
bezen.log.info(navigator.userAgent,true);

// Activate logs
bezen.log.on();
bezen.log.info('Test for script.readyState behavior started');

var script = document.createElement('script');
script.src = 'test1.js';
script.onreadystatechange = function(){
  bezen.log.info('readystatechange: '+script.readyState);
};
document.body.appendChild(script);
bezen.log.info('Added script with onreadystatechange handler');
</script>

I performed the test on a local file in Firefox 2, Firefox 3, Firefox 3.5, Safari 3, Safari 4 and Chrome 3, and got similar results (here the logs recorded in FF 3.5):

Fri Dec 18 2009 17:53:58 GMT+0100
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.6) Gecko/20091201 Firefox/3.5.6
Test for script.readyState behavior started
Added script with onreadystatechange handler
test1.js: Start
test1.js: Start of closure
test1.js: End of closure

The onreadystatechange never gets called. In these browsers, only the onload listener is useful to detect the end of a script loading, the onreadystatechange is not needed.

Answer 2

In Internet Explorer, the onreadystatechange handler fires as expected, after the end of the script.

I performed the same test in Internet Explorer 6, Internet Explorer 7 and Internet Explorer 8, with similar results in these three browsers (here the logs recorded in Internet Explorer 6):

Fri Dec 18 18:14:51 UTC+0100 2009
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Test for script.readyState behavior started
Added script with onreadystatechange handler
test1.js: Start
test1.js: Start of closure
test1.js: End of closure
readystatechange: complete

Here, with a test using a local file, the readyState is always "complete", and it was still the same after several page refresh.

However, as noted in this post by Nicholas C. Zakas, you may also observe "loaded" and "complete", or just "loaded", under different circumstances.

Answer 3

In Opera, the script.readyState property cannot be trusted. For example, the readyState "loaded" may be fired before the script runs in Opera 9.64.

I performed the same test in Opera 9.64 and Opera 10, with different results.

In Opera 9.64, the onreadystatechange handler gets fired twice, once before and once after the script runs. The readyState property is "loaded" in both cases, which means that this value cannot be trusted to detect the end of the script loading:

Fri Dec 18 2009 17:54:43 GMT+0100
Opera/9.64 (Windows NT 5.1; U; en) Presto/2.1.1
Test for script.readyState behavior started
Added script with onreadystatechange handler
readystatechange: loaded
test1.js: Start
test1.js: Start of closure
test1.js: End of closure
readystatechange: loaded

In Opera 10, the onreadystatechange handler still gets fired twice with the value "loaded", but both times after the script ran:

Fri Dec 18 2009 18:09:58 GMT+0100
Opera/9.80 (Windows NT 5.1; U; en) Presto/2.2.15 Version/10.10
Test for script.readyState behavior started
Added script with onreadystatechange handler
test1.js: Start
test1.js: Start of closure
test1.js: End of closure
readystatechange: loaded
readystatechange: loaded

These different behaviors indicate that onreadystatechange is not a reliable way to detect the end of a script loading in Opera. Since Opera also supports the onload listener, this other mechanism should be used instead.

Based on the results of these tests, onreadystatechange should only be used to detect the end of script loading in Internet Explorer, and it should not be set in other browsers.

Answer 4

This is what we did for LA LIVE.

In "Advanced" browsers:

// add a <script> tag with the given url
window.addScripts = function( scripts, index )
{
 if( typeof index == 'undefined' ){ index = 0; }
 if( !( scripts instanceof Array ) ){ scripts = [ scripts ]; }

 var docBody = document.getElementsByTagName( 'body' )[ 0 ];
  script = document.createElement( 'script' );

 script.setAttribute( 'src', scripts[ index ] );

 if( index < ( scripts.length - 1 ) )
    {
         script.onload = function( ){ window.addScript( scripts, index + 1 ); }
    }

 docBody.appendChild( script );
}

$( function( )
{
 if( !$.browser.msie ){ window.addScripts( [ 'script1.js','script2.js' ] ); }
} );

and in IE

<!--[if IE]><script defer src="lib/jquery/jquery.easing.1.3.js"></script><![endif]-->