How to run a Javascript function after a specific JS has loaded?

Question

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 completed processing and then only move further in my original script.

function loadBackupScript(){
    var script = document.createElement('script');
    script.src = 'http://www.geoplugin.net/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?

alex · Accepted Answer · 2016-02-25 13:02:07Z

11

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.net/javascript.gp';
    document.head.appendChild(script);
}

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

edited Feb 25, 2016 at 13:02

answered Dec 1, 2010 at 11:16

alex

492k205 gold badges890 silver badges992 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

acme · Accepted Answer · 2010-12-01 11:15:54Z

2

Add this to your function:

// all cool browsers
script.onload = doSomething;
// IE 6 & 7
script.onreadystatechange = function() {
if (this.readyState == 'complete') {
    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.com/blog/109

answered Dec 1, 2010 at 11:15

acme

14.9k8 gold badges77 silver badges114 bronze badges

Comments

Sean Kinsey · Accepted Answer · 2010-12-01 11:26:47Z

1

I would recommend 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

answered Dec 1, 2010 at 11:26

Sean Kinsey

38k7 gold badges55 silver badges71 bronze badges

Collectives™ on Stack Overflow

How to run a Javascript function after a specific JS has loaded?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related