Avoiding Flash of Unstyled Content (FOUC)

Avoiding Flash of Unstyled Content (FOUC)

I'm trying to progressively enhance a web application I'm developing. Similar to jQuery Mobile, the UI is defined using data attributes (<div data-role="page"/>) that JS then applies classes to. The problem is I'm getting the FOUC on page load and I haven't figured out a way around it yet. jQuery Mobile seems to have sorted out this issue. I've been searching through the jQuery Mobile source code, but so far I haven't found my answer. Currently, my page looks like this...

  1. <!doctype html>
  2. <html lang="en" class="no-js">

  4. <head>
  5. <meta charset="utf-8"/>
  6. <title>My Application</title>
  7. <link rel="stylesheet" href="/stylesheets/styles.combined.css"/>
  8. <script src="/javascripts/scripts.combined.js"></script>
  9. </head>

  11. <body>

  13. <div data-role="page">

  15.       <header data-role="header">My Application</header>

  17.       <div data-role="content">content</div>

  19.       <footer data-role="footer">footer</footer>

  21. </div>

  23. </body>
  24. </html>

the scripts.combined.js file includes modernizr, jquery and all my plugins etc. Anyone have any suggestions?