I have made a js function for including another Javascript in my html. I need to make sure that the script I have loaded using the function is has pleted processing and then only move further in my original script.

function loadBackupScript(){
    var script = document.createElement('script');
    script.src = '.gp';
    script.type = 'text/javascript';
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(script);
}

I need to know that the script has loaded to use its functions ahead. How do I do that?

I have made a js function for including another Javascript in my html. I need to make sure that the script I have loaded using the function is has pleted processing and then only move further in my original script.

function loadBackupScript(){
    var script = document.createElement('script');
    script.src = 'http://www.geoplugin/javascript.gp';
    script.type = 'text/javascript';
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(script);
}

I need to know that the script has loaded to use its functions ahead. How do I do that?

• javascript
• dom-events

3 Answers 3

function loadBackupScript(callback) {
    var script;
    if (typeof callback !== 'function') {
       throw new Error('Not a valid callback');  
    }
    script = document.createElement('script');
    script.onload = callback;  
    script.src = 'http://www.geoplugin/javascript.gp';
    document.head.appendChild(script);
}

loadBackupScript(function() { alert('loaded'); });

Add this to your function:

// all cool browsers
script.onload = doSomething;
// IE 6 & 7
script.onreadystatechange = function() {
if (this.readyState == 'plete') {
    doSomething();
}

IF you don't trust these events you could also use setTimeout() to check for the existence of the function. A good article on this can be found here:

http://www.ejeliot./blog/109

I would remend using LABJs for this.

Using it you can do this

$LAB
.script("framework.js")
.wait(function(){
    //called when framework.js is loaded
})
.script("init.js")
.wait(function(){
    //called when init.js is loaded
});

This is cross-browser and will often be more efficient than hardcoding script tags into your html due to the way it supports parallel downloads.

You can read more about this here