Optimize Javascript Pre-load Of Images

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 a

Solution 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/

Solution 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.

Solution 3:

Using a sprite is good if you're OK with that solution. Also, what I'd try is to detect data URI support in that browser and have the script load different stylesheets base on that info. One stylesheets with base 64 encoded data URIs and the other with a real URL to the sprite. The CSS file is also cacheable.

Here's a technique to detect data URIs support or you could use IE conditional comments or... there are some workarounds for sending IE encoded image strings, in multipart HTTP responses.

Solution 4:

If you don't need all the images right away, you can use the window.timeout() function to do some of the work after the page has initialized.

Also, if you use one image in multiple places, you can avoid multiple calls to the server by putting the image into a CSS style and reusing that style instead of the image.

Solution 5:

Use Sprite Me. And don't miss the blogposts about the creation of this tool.