ansaurus

Question

Hidden divs - reducing latency with style display none + javascript

Answer 1

+2 A:

I would suggest moving your display:none rule to the top of the stylesheet so it's the first or first of a few parsed, though to be honest it would really depend on how many http requests/media resources you have.

You could try throwing the js before the end body tag and making sure the css is at the top, and the css stylesheet that hides those elements is the very first one linked.

meder 2009-10-06 06:01:25

Answer 2

A:

Depends on the browser. Opera, WebKit and Konqueror load CSS and JavaScript in parallel (all CSS is loaded before being applied, however).

display:none is the best solution, but you can use inline-css (like in your description) which is directly loaded with the page, if you want to be extra cautious, its bad practice though.

Nimbuz 2009-10-06 06:06:22

Answer 3

+1 A:

Include the css in an inline style block at the top of the page:

<style>
  .hidden:  { display: none; }
</style>

Then annotate your div with the needed class:

<div class="hidden"> ... </div>

The upshot of this approach is that to show the element, you don't need to set display to block, you can just add/remove the class from the element with JavaScript. This works out better because not every element needs display=block (tables and inline elements have different display modes).

Despite what another poster said, it's not bad practice. You should separate your CSS into presentational and functional markup - functional one controls such logical things as whether or not something gets shown, presentational one just determines how to show it. There is no issue putting functional CSS inline to avoid the page jumping around.

levik 2009-10-06 06:13:34

I'm leaning towards this answer more. I do actually use the class="hidden" idea and do the later hiding/unhiding by adding/removing classes with js. Just didn't think of adding the style for that little piece up there, silly me. Looks like the best way to keep the markup as clean as possible. Any comments from others against this approach? :)

Chris 2009-10-06 06:36:27

Answer 4

+1 A:

I may get hammered for this, but in a lot of apps, when I want to avoid this latency I use inline script tags immediately after the content, like this:

<div id="hidden-div">
    content
</div>
<script type="text/javascript">
    $('#hidden-div').hide();
</script>

Or if you're not using jQuery:

<div id="hidden-div">
    content
</div>
<script type="text/javascript">
    document.getElementById('hidden-div').style.display = 'none';
</script>

At first this seems clunky; however, there are a couple of reasons why I take this approach:

The hiding is immediate (no waiting for the entire DOM to load)
People with JavaScript disabled will still see the content, whereas if we hide it with CSS there is no way for non-JS users to make it visible again.

Hope this helps!

Mark B 2009-10-06 06:17:32

Answer 5

A:

For what it's worth, some people hide the entire <body> element, and then show whatever should be shown later using the Javascript.

AmbroseChapel 2009-10-06 06:39:00

ansaurus

tags:

views:

answers:

Hidden divs - reducing latency with style display none + javascript

related questions