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 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:
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):
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.
Similar results in Chrome.
Doesn't take onready...
Just onload and onerror.
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.
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:
In Opera 10, the onreadystatechange handler still gets fired twice with the value "loaded", but both times after the script ran:
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.
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):
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.