Execute callback after modernizr/yepnope has loaded all files

Question

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
    }
]);

That sounds tricky and I'm not sure if you can do with with the framework. What might be an option is having a receiving function that is called to by 1,2,3,4 etc. (this is a bit messy though) and only calls the complete function once all have been received. Ugh, sorry if that's the solution though. — Chris Nicola, Sep 30 '13 at 23:28
Current solution is to nest all the tests as callback functions. This might be less messy :) — Stephanie Hobson, Sep 30 '13 at 23:42
Yikes. BTW doesn't all this get loaded before the 'onload' event anyways? Does animationInit have to be called before that? — Chris Nicola, Sep 30 '13 at 23:54
The test is currently executed on DOMReady, and the animations initialize as soon as possible after that. — Stephanie Hobson, Oct 01 '13 at 00:13

score 0 · Accepted Answer · answered Oct 01 '13 at 00:03

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); }
    }
]);

Execute callback after modernizr/yepnope has loaded all files

1 Answers1

Linked