[SOLVED] Execute callback after modernizr/yepnope has loaded all files

Execute callback after modernizr/yepnope has loaded all files

I have a number of test conditions and files to load before I run the follow up scripts on my page. Is there a way to fire a callback after ALL my files are loaded?

The following is suggested by this post and communicates my intent but does not actually work. The function in the complete is firing before 1.js or 2.js has finished loading.

Modernizr.load([
    {
        test: App.isSmallScreen,
        yep:  '1.js',
        nope: '2.js'
    },
    {
        test: App.isTouch,
        yep: '3.js'
    },
    {
        test: Modernizer.csstransitions,
        nope:4.js
    },
    {
        complete: animationInit
    }
]);

Solution

Apologies in advance for such a cheap trick but this was the best I could come up with. It could definitely be improved though.

It would probably be fairly straightforward to embed this or extend Modernizr to build in a "finished" event in some way to do this more cleanly.

var completed = []
var complete = function(i) {
  completed.push(i)
  if (completed.length === 3) animationInit();
}

Modernizr.load([
    {
        test: App.isSmallScreen,
        yep:  '1.js',
        nope: '2.js',
        complete: function() { complete(1); }
    },
    {
        test: App.isTouch,
        yep: '3.js'
        complete: function() { complete(2); }
    },
    {
        test: Modernizer.csstransitions,
        nope:4.js
        complete: function() { complete(3); }
    }
]);