Work
SubscribeHow to detect when an external library has loaded
Sometimes in a web app, you'll want to load a script externally. The only problem is if you need to reference something within the external library, which you should only do once it's definitely loaded.
Here's a tip that works with all browsers to ensure the script is loaded before running your dependant code.
Here's the JavaScript code to load the external library with a callback passed in:
function loadExtScript(src, callback) {
var s = document.createElement('script');
s.src = src;
document.body.appendChild(s);
// if loaded...call the callback
}Firefox allows you to listen for the onload event on the script element:
s.onload = callback;With Internet Explorer you can wait for a state change on the script element:
s.onreadystatechange = function() {
if ( this.readyState != "loaded" ) return;
callback.call();
}The problem comes with Safari - there's no event change for Safari, so we can't tell when the script has loaded.
This is the solution I came up with (and this solution should also work with Opera):
function loadExtScript(src, test, callback) {
var s = document.createElement('script');
s.src = src;
document.body.appendChild(s);
var callbackTimer = setInterval(function() {
var call = false;
try {
call = test.call();
} catch (e) {}
if (call) {
clearInterval(callbackTimer);
callback.call();
}
}, 100);
}The function takes a test as a parameter. Since you are the designer of the app, you'll know what successful test is. Once this test is true, it will execute the callback.
A simple test could be to check whether a function exists, for example:
loadExtScript('/fixpng.js', function() {
return (typeof fixpng == 'function');
}, myCallbackFunction);You should follow me on Twitter here I'll tweet about JavaScript, HTML 5 and other such gems (amongst usual tweet-splurges)
Introducing HTML5%7Cutmcsr%3D(direct)%7Cutmcmd%3D(none)%3B%2B__utmv%3D98431296.-%3B)
My precedent post wasn't spam, just another, more simple (imho), solution that works perfectly with one or more external script.
I hope You don't think You wrote for first time solutions like this one because there are a lot of alternatives, mine is only one of them.
Regards
Sorry it got nuked - you just posted a link so I wasn't sure if there was any more to it. I took another look at your solution, but the crux of what I'm proposing is to load an external script - but then fire a callback once it's loaded (i.e. that callback may run code that's within the external script).
The point in my post is that Safari doesn't fire a load event, so this post shows one way to detect when the library is loaded, to then fire your callback.
The only other way I know is to add a second script element moments after the first has been loaded to fire the callback.
[...] simply give no indication of this at all. One common solution to dealing with this is to use an interval and perform a check. The work at TrainOfThoughts however takes the beautiful approach of inserting [...]
[...] The following code, if executed from the lower text area of the MochiKit interpreter, will define a function that can be subsequently used to import other JS files. It is based on this post in the MochiKit Trac system. The ‘test’ parameter may be omitted in IE or FF; its purpose is described here. [...]