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() {
var a=[
'/js/my-contact-page-functions.js',
'/js/jquery-1.4.2.min.js',
'/js/jquery.color.js',
'http://cdn.thirdparty.com/third-party-tracking-script.js',
],
d=document,
h=d.getElementsByTagName('head')[0],
s,
i,
l=a.length;
for(i=0;i<l;i++){
s=d.createElement('script');
s.type='text/javascript';
s.async=true;
s.src=a[i];
h.appendChild(s);
}
})();
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() {
$.getScript("/js/jquery.color.js");
});
Anyone have any thoughts on how you'd go about this? Thanks!
LabJS and RequireJS are two popular choices right now. They both work with jQuery but take slightly different approaches, so you should look at both.