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.