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 t

Answer 1

Similar results in Chrome.

Doesn't take onready...

Just onload and onerror.

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

I've found that internet explorer (testing in 9) DOESN'T ALWAYS have your script ready when readyState === 'loaded'. I have had success using this event handler (in 9 of course) onactivate. Was pulling my hair out before.

Answer 5

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.