There’s more than one way to hide content.

You can z-index it behind other content (such as a DIV) by setting a negative value:

#theContent { z-index:-11111 }

You can move it off the page:

#theContent { position:absolute;top:-9999em;left:-9999em; }

These two ways are not necessarily the best way to go. More common ways are through the display property:

#theContent { display:none; }

And through the visibility property:

#theContent { visibility:hidden }

They’re pretty darn similar — or so you would think if you haven’t used them much. In actuality, they’re distinctly different and both have their own benefits.

PERFORMANCE

Hiding elements through display:none will provide greater performance than using visibility:hidden. But why? Simple: when you use display:none — it’s like the object is no longer on the page. It’s in DOM of course, but not drawn on the page at all. However, when you use visibility:hidden — it’s pretty much identical to setting the opacity of the object to 0. In other words, it’s still there and it’s still occupying space.

Think if it like this:
display:none — makes the object teleport off the page
visibility:hidden — is like an element going ninja on you…it’s still there, watching your every movement and occupying space, but you just can’t see it

So you must be thinking now “Whoa man, I’ll definitely use display:none then instead”. I don’t blame you. Heck, even JQUERY’s hiding method uses it. However, it isn’t perfect.

Say whattttt? Yeah. It’s not perfect. I ran into a case where it was in fact a huge headache.

Some web pages have a LOT of images. Desktop computers can display these all fine (for the most part) and not have issues lagging. However, then there are mobile devices such as iPads and so forth.

The iPad has a decent resolution and can handle 1024×800 backgrounds easily. One background is fine — cool stuff. Two — sure, no problem. A dozen? Forgettttt about it. Combine these with cool slide transitioning effects using JQUERY UI and you have lag city (even if you compress these bad boys to around 30kb a piece).

You must be thinking “Ok, then hiding these before they’re needed should help get rid of the performance issue! They’re not on the page anymore! I’m a genius!”

Good for you. I commend your thinking. And you know what? That DOES work on many browsers (older versions usually). Unfortunately though, many will end up not caching the image. So when you DO call it, it may not always show up (or if it does, then will take awhile to appear).

If you did visibility:hidden instead, then there would be no caching issue and it wouldn’t be an issue! But you’d suffer performance problems still.

The key would be to use a preloader, sprites, etc. and have the images hide AFTER being loaded.

Anyway, there you have it. A mix of information. Mostly useless. But whatever.