Question

I’m experimenting with Modernizer.load.

I have this:

Modernizr.load([
      {
         load  : ['/js/jquery-1.6.1.js', '/js/jquery.tools.min.js', '/js/myscript.js']
      }
      ]);

If I understand correctly, I can use code like this to load scripts asynchronously. However, can I then execute them in order? What if myscript.js requires the jquery object to be loaded first?

In the example in the modernizr documentation, load([]) can take a ‘complete’ property, the parameter of which can be a function that can load another script when everything else is done. However, if I use a function here to load my post-dependancy script, then it loads in serial. The docs specifically say that this can harm perfomance.

However, if I load everything asynchronously, I don’t have any idea about the order in which they run. And of course, I need my dependancies to run first.

Answer 1

If you use Modernizr.load, all the files you include via the embedded list/hash will be loaded asynchronously, but they’ll each be executed in the order that you put them in.

So, your example will load the files asynchronously but execute them in this order:

1: /js/jquery-1.6.1.js
2: /js/jquery.tools.min.js
3: /js/myscript.js`

You can simplify your example, by the way:

Modernizr.load(['/js/jquery-1.6.1.js', '/js/jquery.tools.min.js', '/js/myscript.js']);

For more details, see the Modernizr.load() tutorial in the Documentation, or check out Yepnopejs.com (which is what Modernizr.load() basically is, at this time).