How does one hide content from a user until a stylesheet is loaded and executed?
I'm using a jQuery plugin for sliding panes of content. For about 400ms all the page elements flashes up (text, images, etc.) on top of themselves making for a messy garbled jumble...a brouhaha you could say.
Then the stylesheet comes along and sorts it all out. But for the sake of professionalism and perfectionism I'd like to hide all the content until the stylesheet has loaded.
$(document).ready is inappropriate because boom...that's my problem. onload() doesn't work either cuz then all content is hidden until the page completely renders (images...4, 5, 6 seconds...zzzzzzzz....)
So does anyone know what the options are? (And would it be possible to play Girl From Ipanema midi during page load? :p)
You can have the stylesheet hide specific elements as display: none until they are needed.
Accessibility-wise, you should not assume your stylesheets are actually being used by the client. Your content should be accessible without the stylesheet, and stylesheet should only enhance the presentation - that's Progressive Enhancement.
If accessibility matters less, you can hide the entire page (or at least the brouhaha) with display: none in the wrapper div or body.
The problems is accessibility. You normally want the content to be available for tools that do not support all the advanced features, including old browsers, search engines, mobiles phones, screen readers... That's what prevents you from doing what I mentioned in the first paragraph.
(As for your latest requirement, you can use the jQuery.ipanema-girl.js plugin.)