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?
However, I wonder if there is a more elegant, less degraded method for dealing with this… suggestions?
there is… if you read through the article i posted a link to, the author recommends a blank script tag just before you link elements. so, for example, if your head tag looks like this:
<head>
<link rel="stylesheet" type="text/css" href="path/to/styles.css"/>
</head>
try adding a blank script tag before the styles, i.e:
<head>
<script type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="path/to/styles.css"/>
</head>
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! 
Here is the generic code used pretty much throughout the site:
$(document).ready(function(){
$('#awd').addClass('here');
});
This is used to give a background color to a
<li>
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
<body>
tag a class of “boo.” “Boo” has only one declaration: “visibility:none;” I have added a snippet to the jQUery code in the head:
$('body').removeClass('boo');
. 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?
This sounds more like a function of your style sheets css not being loaded…? 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?
what exactly is in your jQuery code? you mentioned the DOM-ready function, are you using it? if so, what is happening on DOM-ready?
i can appreciate not being able to post a demo page, but we’ll likely need some code (even a simplified example) to be able to help.
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?
You could try an experiment of placing the jQuery links at the bottom of the page (just before </html>) and see if that makes any difference.