Preloading images in HTML, is there a more modern way?

Question

I have an image loaded by JS on a mouse event. It's a fairly big image so I want to make sure it gets pre-loaded. I reemmber some old techniques from years ago and found this example:

<SCRIPT LANGUAGE = JAVASCRIPT>
if (document.images) 
{
   img1 = new Image();
   img2 = new Image();
   img1.src = "imageName1.gif";
   img2.src = "imageName2.gif"
}
</SCRIPT>

I wondered if this is still good/relevant, or maybe browsers automatically detect unused images and preload them anyway? Note my page has to support IE6, so I might still need older techniques anyway, but I'm still interested if more modern browsers have a better way?

Answer 1

Nope, this is it. Why change something that works?

But a more proper usage is like this

(function() {
   var img1 = new Image();
   var img2 = new Image();
   img1.src = "imageName1.gif";
   img2.src = "imageName2.gif"
})();

or just

new Image().src = "imageName1.gif";
new Image().src = "imageName2.gif"

Both of these avoids cluttering the global scope with variables.

And language="JavaScript" is deprecated. Use type="text/javascript".

Answer 2

Depends what kind of images you are talking about, icons/buttons etc. could be done using a technique called CSS Sprites.

http://www.alistapart.com/articles/sprites