I’ve come up with a far simpler and easier method to solve the problem using only valid CSS and good old HTML.
My trick uses the display:none; style.
What you need to do is add the img tag:
<img src="images/my_image.jpg style="display:none;" alt="My brilliant image" />
straight after the opening <body> tag. This will be the first thing your browser picks up, meaning it should be the first thing your browser loads (even though it’s not displayed!) Now when the image crops up again later on in the source, it will have already been loaded into the cache and can be displayed instantly.
A simple, valid, cross-browser compliant solution.