Optimize javascript pre-load of images

Question

I was wondering if anyone has any strategies for optimizing the pre-loading of images via javascript?

I'm porting a Flash application into html/css, attempting to recreate the UI as close to the original site as possible. It's essentially a photo browser application, where a high-res image is shown when the user hovers over a link. There's about 50-80 of these images per page.

Pre-loading all the images individually creates a load time significantly longer than that of the Flash application. The amount of data is the same, but I have to assume the longer load time is due to the number of round trips that have to be made to the server for each image.

Also, I'm looking at a significant load time for each page even after the images have been cached, because the page still needs to contact the server for each image to receive the 304 Not Modified code.

Does anyone have any suggestions for speeding this up? Would it make sense to possibly try creating one huge image sprite that gets downloaded in a single request rather than 50-80 smaller images that each take a single request? The goal here is achieve a similar load time to the Flash site.

Thanks. I know this doesn't sound like an ideal way to do things.

Answer 1

As you pointed out - one of the most common factors that influences load times for modern web pages are the huge number of small images being sent between the client and server. Some recent studies indicate that for more than 20 images, 80% of your load time is going to be spent in the latency of doing these many gets, not actually doing the downloading!

A tool called SmartSprites is a very handy way to "compile" a single large image from all of your many little images which will accomplish both much faster load times and the prefetching of images. Here's the link http://smartsprites.osinski.name/

Answer 2

I would say using CSS sprites is a big one. Having all your images, or images of a similar nature come down on the one HTTP request really helps load time. Downloading 10 images with a total file size of 100kb is going to be slower than downloading 1 image the same size. It also helps images come down before they are required in the case of hovers and mouse over events and they generally make things a lot smoother.

Here is an article on them.