Noticed recently when trying to test scripts that either rely on CSS loading or run on document ready but that seems to fire before the page has rendered.
Was there any special event hooks or ways to prevent the fousc for javascript to work well with it?
An example of what I am trying to do is using bigtext to format headers and when the page loads and the javascript runs the headers are unstyled and container size isn’t accurate.
This seems like a more general JavaScript-related question than a Sage-related question. Generally we like to try and keep the forum focused on things directly related to the Roots stack.
You might take a look at this: https://stackoverflow.com/questions/8396407/jquery-what-are-differences-between-document-ready-and-window-load
Sage’s built-in JS routing system fires on jQuery .ready(), which fires once the browser has constructed the DOM. This can (and often will, if you have large CSS files) happen before CSS rendering, images downloading, etc.
Thanks Alwaysblank sorry if this was the wrong place, I felt very strongly that this was specific to the tools adopted by Sage and how they work with javascript. I understand the forum is more for roots stack but this means that the best audience for this question is here also, hardly anyone else has such a specific set of tools put together that cause this issue.
I think you might be right about the events. I was able to make it work on production and locally if I built the assets instead of using browsersync. I thought the router (the paul irish inspired one) was running before the browsersync javascript has injected the css into the browser. There was always an ugly flash of unstyled content.
Since it worked in production and I couldn’t find anything else about it I hoped someone here had seen similar issues.
Testing $(window).load appears to resolve the issue locally, so what I was seeing was more of a race condition. I bet someone somewhere would experience it on production also.
Thanks for your help.