So I’ve heard of the Flash of Unstyled Content before – but never really had this problem. I always use a LINK tag for my stylesheets.
However, I just ran into it today – in FireFox even with a LINK tag…
Fixing Flash of Unstyled Content in Firefox
Simple really – I was loading way too much javascript before my stylesheet (not my fault on the large amount of js!!) – and the delay was causing the flash. I moved the link to the very first part of the content – and presto – good to go.
So, instead of
1 2 3 4 5 6 7 | <head> <script src="#"></script> <script src="#"></script> <script src="#"></script> <script src="#"></script> <link href="#" type="text/css" rel="stylesheet" /> </head> |
Just move it to the top:
1 2 3 4 5 6 7 | <head> <link href="#" type="text/css" rel="stylesheet" /> <script src="#"></script> <script src="#"></script> <script src="#"></script> <script src="#"></script> </head> |
… next battle, getting rid of sooo much js 