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);
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 [...]