I want to trigger a function to run as quickly as possible, but it needs to wait for another (third party) script to finish loading, else the proper variable will not be defined yet.

Can I listen for a specific script to finish loading and bind a function to that event?

I need code, so:

When this loads:

<script src=".io/socket.io.js"></script>

run this:

function(){ console.log('socket ready!'}`

It would seem that I could just mutate the third party script to call the function, but not in this case: socket.io is a dynamically generated script which I have no control over the source of.

The alternative would be to wait for the document to load; this question is an attempt to run the script as soon as possible instead.

I want to trigger a function to run as quickly as possible, but it needs to wait for another (third party) script to finish loading, else the proper variable will not be defined yet.

Can I listen for a specific script to finish loading and bind a function to that event?

I need code, so:

When this loads:

<script src="https://www.officeball.biz/socket.io/socket.io.js"></script>

run this:

function(){ console.log('socket ready!'}`

It would seem that I could just mutate the third party script to call the function, but not in this case: socket.io is a dynamically generated script which I have no control over the source of.

The alternative would be to wait for the document to load; this question is an attempt to run the script as soon as possible instead.

• javascript

• I feel like this must be easy to do, but I just can't think of how. – user3818284 Commented Oct 28, 2014 at 1:39

1 Answer 1

You can create a script and add to the head:

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://www.officeball.biz/socket.io/socket.io.js';
document.getElementsByTagName('head')[0].appendChild(script);

script.onload = function() { 
    console.log( 'loaded' );
}

This example can be wrapped into a function and added to the document head:

<script>    
    function load_script( src, callback ) {

        var script = document.createElement('script');
        script.src = src;
        document.getElementsByTagName('head')[0].appendChild(script);

        script.onload = callback;
    }
</script>

And, it can be later used like this:

load_script( 'https://www.officeball.biz/socket.io/socket.io.js', function() {
    console.log( 'socket ready!' );
});

Furthermore, as a response to your ment, there is also a possibility to create a script tag with id and data attributes:

<script id="socket-io" data-src="https://www.officeball.biz/socket.io/socket.io.js" type="text/javascript"></script>

And to add the src attribute later, the script begins to load the moment the src attribute is set:

var script = document.getElementById( 'socket-io' );
script.src = script.getAttribute( "data-src" );

script.onload = function() { 
    console.log( 'socket ready!' );
}

And this can be, of course, wrapped in a function, for example:

<script>    
    function load_script( id, callback ) {

        var script = document.getElementById( id );
        script.src = script.getAttribute( "data-src" );

        script.onload = callback;
    }
</script>

And, finally:

load_script( 'socket-io', function() {
    console.log( 'socket ready!' );
});