I’ve been looking at various asynchronous resource-loaders and I’m not sure which one to use yet. Where I work we have disparate group-efforts whose class-modules may use different versions of jQuery (etc). As such, nested dependencies may differ, as well. I have no control over this, so this means I need to dynamically load resources which may use alternate versions of the same library.

As such, here are my requirements:

  1. Load JavaScript and CSS resource files asynchronously.
  2. Manage dependency-order and nested-dependencies across versions.
  3. Detect if a resource is already loaded.
  4. Must allow for cross-domain loading (CDN's)
  5. (optional) Allow us to unload a resource.

I’ve been looking at:

I might be able to fake these requirements myself by loading versions into properly-namespaced variables & using an array to track what is already loaded...but (hopefully) someone has already invented this.

So my questions are:

  • Which ones do you use? And why?
  • Are there others that my satisfy my requirements fully?
  • Which do you find most eloquent and easiest to work with? And why?

For those interested, I tried all the AMD libraries above (and more). In the end, I went with RequireJS. It's just cleaner and easier overall...and I'm glad to be using it.

  • For JavaScript, I don't think #5 is even possible. It might be theoretically possible for CSS, but I'm not sure if any browsers support that. – Mike Baranczak May 16 '11 at 21:12
  • @Mike Thanks for commenting! If the asynch-loader tracked & populated resources using object-variables...it's completely be possible. – Prisoner ZERO May 17 '11 at 11:22
  • Right, but the NEW constructor will duplicate the object, so if you create a new of something you called in, it'll still exist there. Why would you unload it anyway? – Incognito May 17 '11 at 13:03
  • @user1525 Thanks for commenting! Unloading resources saves on memory. I'll edit my question above with some thoughts on your comment (in a few minutes). Thanks again! – Prisoner ZERO May 17 '11 at 13:11
  • jQuery already has a getScript function for script injection. – zzzzBov Sep 23 '11 at 13:20

I've used RequireJS on serious projects, and I love it, but it's not really meant to be an asynchronous loader. It's really meant to be a module system. Asynchronous loading is provided in service to that goal. It can be pushed to fill any of your requirements, but its loading services are designed to load modules, not arbitrary files.

Load JavaScript and CSS resource files asynchronously: Requirejs loads any modules that you require using script tag injection, so asynchronously.

Manage dependency-order and nested-dependencies across versions: This is where RequireJS Shines. Modules may declare dependencies on other modules, and the load order will be extrapolated from that dependency declaration. There is also an order plugin, which can force order on dependencies.

Detect if a resource is already loaded: Requirejs will only load a module once.

Must allow for cross-domain loading (CDN's): This is possible, but requires some configuration; You may set a specific URL for any module, and that will override the default location, so you can set it to a CDN.

RequireJS will serve best if you write modules using its format, and be least effective if you are using it to load raw javascript.

It also provides a build process that will merge your modules together into a single file for production.

| improve this answer | |

You could in theory just keep a list of scripts already loaded, and make a function that loads scripts that haven't yet been loaded.


| improve this answer | |
  • 2
    Or use Curl / RequireJS they have this and more features. And you don't have to maintain it yourself ;) – Raynos May 17 '11 at 13:50
  • You forgot to mention clear structure and non-relative includes. – Incognito May 17 '11 at 13:54

If you're looking at RequireJS and want to depend on CSS files, you can checkout the CSSP RequireJS plugin :

CSS with Padding. This project implements a plugin for the RequireJS project that allows modules to list CSS files as dependencies. This allows RequireJS to wait until specific style rules are known to be in effect before it releases the JavaScript module to be evaluated. This would be useful if, for example, if your JavaScript module required certain CSS rules, defined in a separate file, to be applied to the DOM before it could be initialized.

| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.