What is the general consensus on preemptively loading images on web pages?

Question

So I've been wondering this for a while, I'm currently building a website which is very image oriented. What do people think of preloading images? How do they do it? (Javascript versus display:none css?).

As users what do you think of it? Does the speed gained while using the website justify the extra time you have to spend waiting for it to load?

From a programmer's stand point, what is better practice?

Answer 1

If you really have to preload (e.g. for rollover images), definitely use CSS. JavaScript can be blocked, and you can't rely on it.

Answer 2

Rather than pre-loading multiple images, I recommend you use CSS Sprites: http://css-tricks.com/css-sprites/

Which is a technique where you consolidate multiple images into a single image (and use background-position to select the correct portion) to reduce the number of HTTP requests made to the web server and reduce the overall page load time.