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 current version of jQuery 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.
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.