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)

Answers


You can have the stylesheet hide specific elements as display: none until they are needed.

However, if you do this directly in the stylesheet you've got accessibility problems, as on a browser without JavaScript available the content will not appear at all. A way around this is to key the hiddenness on a variable that is set from JavaScript before any of the deferrable elements are loaded, for example as a class on <body>:

<head>
    <style type="text/css">
        body.withjs .deferred { display: none; }
    </style>
</head>
<body>
    <script type="text/javascript">
        $('body').addClass('withjs');

        $(document).ready(function() {
            // set up slideyness
        });
    </script>

    <p>Content that loads normally...</p>

    <div id="slideything" class="deferred">
        content
    </div>
</body>

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.


It's very easy to hide content that's going to be processed by JavaScript. You just need to generate the content itself with JavaScript or set its style to display: none.

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.

My advice is to alter your CSS so the content looks good even with JavaScript disabled.

(As for your latest requirement, you can use the jQuery.ipanema-girl.js plugin.)


Need Your Help

Want to convert "GdkPixbuf" to "GtkSelectionData" object

c++ c gtk clipboard

I want to convert my pixbuf to "GtkSelectionData" so, how can I convert it in c++ ?