loading js files and other dependent js files asynchronously

Posted by taber on Stack Overflow See other posts from Stack Overflow or by taber
Published on 2010-05-05T21:47:14Z Indexed on 2010/05/05 22:08 UTC
Read the original article Hit count: 335

I'm looking for a clean way to asynchronously load the following types of javascript files: a "core" js file (hmm, let's just call it, oh i don't know, "jquery!" haha), x number of js files that are dependent on the "core" js file being loaded, and y number of other unrelated js files. I have a couple ideas of how to go about it, but not sure what the best way is. I'd like to avoid loading scripts in the document body.

So for example, I want the following 4 javascript files to load asynchronously, appropriately named:

/js/my-contact-page-js-functions.js // unrelated/independent script
/js/jquery-1.3.2.min.js // the "core" script
/js/jquery.color.min.js // dependent on jquery being loaded
http://thirdparty.com/js/third-party-tracking-script.js // another unrelated/independent script

But this won't work because it's not guaranteed that jQuery is loaded before the color plugin...

(function() {

Is it pretty much not possible to load jquery and the color plugin asynchronously? (Since the color plugin requires that jQuery is loaded first.)

The first method I was considering is to just combine the color plugin script with jQuery source into one file.

Then another idea I had was loading the color plugin like so:

$(window).ready(function() {

Anyone have any thoughts on how you'd go about this? Thanks!

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about asynchronous