I need to load some js files dynamically and sequentially(i.e. second script loads after load complete of first one, third after second and so on).
Question: how to detect when a script have been loaded? I have encountered problems with onload event - it not fires in IE8. After reading this, I tried to subscribe to onreadystatechange and wrote very ugly code for loading a script:
function loadScript(url, callback) {
var isLoaded = false;
var script = document.createElement('script');
script.onreadystatechange = function () {
if ((script.readyState == 'complete' || script.readyState == 'loaded') && !isLoaded) {
if (callback) callback();
}
};
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', url);
document.head.appendChild(script);
};
Can you suggest better cross browser solution without such tricks?
UPD: Thanks for answers. What should I do if I need also to load jquery.js(for example, client have old version) :)?
I think what you need is jQuery.getScript
The function takes a URL and a success method with which you can chain loading of scripts and therefore load them sequentially:
jQuery.getScript( url, function() {
jQuery.getScript( url2, function()
{/*... all 2 scripts finished loading */}
);
});