delay the loading of 3rd party javascript

Question

Is there ANY method to delay the loading of 3rd party JavaScript files until the rest of the page has finished loading?

Answer 1

You can attach to the onload event of page and once that fires you can dynamically insert the references to the files.

For example:

function loaded(){
   var el = document.createElement("script");
   el.src = "somefile.js";
   el.type="text/javascript";
   document.getElementsByTagName("head")[0].appendChild(el);
}

Answer 2

One simple way is to load them at the end of your html page.

If you want to ensure that even content like images have loaded first, plus get a bunch cross browser issues smoothed out to boot, the jQuery library makes this easy with $(window).load() and $.getScript().

$(window).load( function() {
    $.getScript('your_3rd_party-script.js');
});

jQuery is not the answer to all questions, but it does provide some nice abstractions. For example, you'll get automatic IE cache-busting (if you want it), and won't have to worry about the browser-specific issues of direct DOM-manipulation approaches.