CODEWITHSUNDEEP
javascriptcsszurb-foundationzurb-foundation-6
Kevmon
Kevmon

Reputation: 1005

Using Foundation 6 - Loading CSS and JavaScript Asynchronously

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 (e.g. 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?

Upvotes: 2

Views: 223

Answers (1)

DAB
DAB

Reputation: 1343

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.

Upvotes: 0

Related Questions