How to preload images so they're loaded faster everywhere else on the page, and is it a good practice?

Question

Here's the thing: I have a Google Map with a lot of markers in it.

The problem is that the map loads, stays empty for a little while and only then markers are displayed. The markers are customized PNGs.

My idea is to "preload" them (not sure it's the right word) so they appear almost at the same time as the map.

What I did so far is to add the same images I use on my map, outside of the map, earlier in the page in display:none;

I'm not sure but it seems like the time between the map and the images are displayed has been reduced.

Is it the best way to do it, and is it a good practice?

Answer 1

You could use "sprites" i.e. a collection of separate images on 1 single png. This bears the advantage of requiring only 1 load i.e. less separate loads. Google GWT pushes this technique a lot (i.e. Image bundles).

The value of this technique increases with the number of discrete images that require loading: the more separate images, the longer it takes to load them.

Answer 2

From what I recall of most modern browsers, images are always loaded once (given the src of the image is the same). I guess you mean loading them before the maps load.

In my opinion in does not really matter that much. Markers should be relatively light compared to the map image itself and I can't really use them without the map anyway.

If you think it improve you user experience then I think it is a good practice, but I'd try to get them on a more cleaner way, probably an ajax call early in the page load?

Take a look at Ajax In Action: Preloading Images

Answer 3

Don't use display:none for preloading. Because an element set to display:none doesn't render any of its physical attributes, the browser doesn't bother downloading it until it's made visible.

An alternative is to use visibility:hidden, but you run the risk of running into a user agent that does pretty much the same thing. visibility:hidden requires that the browser compute the box model for the image, which requires that image is loaded (to get the dimensions). I don't believe this works in IE6, though.

The last technique (and my favorite) is to create a div directly before your </body> tag. Position it absolute with left: -99999999px; top: -99999999px. The browser is forced to render the images (and consequently load them) and there's no messy Javascript to deal with.

Now, to integrate this with your issue, put the code for your Google map after your "preload div". Your browser will be forced to load the images before it runs the code to create the map. This should solve your problem.

Hope this helps!