Delay script loading

The simplest way would be to let the script file load normally and just call a main function in it with setTimeout() like this:

<script type="text/javascript" src="offsite file I am referencing"></script>
<script type="text/javascript">
setTimeout(executeMainFunction, 5000);    // function in offsite js file
</script>

If you cannot do that for some reason, then you can delay the loading of the external script file like this:

setTimeout(function() {
    var headID = document.getElementsByTagName("head")[0];         
    var newScript = document.createElement('script');
    newScript.type = 'text/javascript';
    newScript.src = 'http://www.somedomain.com/somescript.js';
    headID.appendChild(newScript);
}, 5000);

Here's a reference article on dynamic loading of script files (and other types of resources): http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS.


you are almost there.

in your settimeout callback function do the following:

var script = document.createElement('script');
script.src = "http://whatever.com/the/script.js";
document.getElementsByTagName('head')[0].appendChild(script);

You can delay the script from loading, until the page finishes loading, using the HTML script defer attribute:

<script src="offsite file I am referencing" defer></script>

You can use DOM manipulation to create a new script tag at runtime. Adding it into the document will load the external JS file just as if you had written it into the HTML in the first place.

var loadScript = function(sourceSrc){
    var scriptTag = document.createElement('script');
    scriptTag.src = scriptSrc;
    document.getElementsByTagName('head')[0].appendChild(scriptTag);
}

Tags:

Javascript