Home/ Questions/Q 878947
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T11:50:56+00:00

I’m using a jQuery plugin for sliding panes of content. For about 400ms all

  • 0

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 because 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)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0