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">

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

  9. <body>

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

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

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

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

  14. </div>

  15. </body>
  16. </html>

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