Using Foundation 6 - Loading CSS and JavaScript Asynchronously

Question

I've finally realized why I've been experiencing so many problems with Foundation 6. I've been using LoadCSS to load non-critical CSS async and defer to load my JavaScript async. It seems that Foundation's JavaScript relies on styles that are already in place (eg breakpoint detection)

So on first load (before cached by the browser), there's no guarantee which will load first, the JavaScript or CSS, being that they're both loading async. When this happens, it breaks.

I'm trying to organize my project workflow such that the JavaScript and non-critical CSS both load async as to not render-block. It seems that I cannot do this with Foundation.

Is there a way to guarantee that my CSS will load first? Is there a better way to approach this idea?

Answer 1

I have been working on this also. There are a few things that can be done to improve the quality, like running Foundation.MediaQuery._reInit() before $(document).foundation(); but it seems like that still doesn't do it all. It would be great if this could be done but it doesn't look very hopeful at this point.