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
    }
]);
Was it helpful?

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); }
    }
]);
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top