My web pages tend to render without styling for a flash to a few seconds before the document is ready. I am afraid that I cannot show the pages because the staging site is in a password-protected directory. However, I am sure that someone reading this has experienced this phenomenon and has a suggestion of how to fix it.
I suspect it has something to do with the “document.ready” function in jQuery. Amirite? Suggestions?
of course, i don’t really like the idea of adding bloat to pages (i.e. an empty script tag), but it may be more scalable over time as you can add more and more scripts/styles if necessary and you won’t notice any additional lag. the current solution (using DOM-ready function to show the body element) requires the page to be ready before revealing the content. as you mentioned, you aren’t currently seeing much of a delay, but as your site/app grows in complexity this may change. hope that helps!
element in the navigation bar (so that I can use the same include file throughout that section of the site.)
It happens throughout the site, however… and if a page has more scripting, this is more noticeable. It happens in all browsers I have tested (i.e., FF, Safari Mac, Opera Mac, Chrome Mac, IE 8 Win & IE6 Win.
@keeganwatkins: You are 100% right. What I thought was a jQuery bug is actually this FOUC that you mention. I do have a number of stylesheets–for print & mobile.
Here is how I have dealt with it: I assigned the
tag a class of “boo.” “Boo” has only one declaration: “visibility:none;” I have added a snippet to the jQUery code in the head:
. THis has caused the pages to appear blank until the document is ready. Normally this is only a blink, and even the heavily scripted pages only take a second. Fortunately for me, none of my pages rely on multiple server requests, so I am confident that the user will not be inconvenienced.
However, I wonder if there is a more elegant, less degraded method for dealing with this… suggestions?
Correct me if I’m wrong but the JQuery library shouldn’t really have much to do with the style of your site should it?
hard to say without seeing any of TMacFarlane’s code, but there are several ways that using jQuery could impact the style… obviously it shouldn’t change the styles inherently (i.e. just loading jQuery shouldn’t make any DOM changes), but adding/removing/changing styles is one of jQuery’s more useful features.
my guess is one of a few scenarios:
you have some jQuery code that loads/removes/changes stylesheets dynamically
you have some jQuery code that adds/removes/changes IDs or class attributes on some elements, which impacts CSS specificity, and happens on DOM-ready
you are seeing the well-documented FOUC bug in IE/Safari
chances are the issue is easy to fix, but without any code were all sorta shooting in the dark, ya know?