The order in which images load when viewing a website fis always a tricky thing to get right. Usually, if you have any sort of javascript gallery for viewing images, these images will load first (as javascript normally loads first). This is always a pain if the main layout images have not yet loaded – you’ll get the javascript gallery appearing with none of the layout images.

There are plenty of solutions out there to set the order of image loading, and most solutions use javascript. Now to me, this is like trying to fight fire with fire; solving the problem of certain javascript images loading first with yet more javascript. But what’s wrong with javascript, surely a little more won’t harm anyone.
Well, javascript means more work for the client’s computer and makes loading times (only a fraction) slower. Also, if you’re not that familiar with javascript, is can be quite daunting to keep adding this.object(); and that.var=10; to your code.

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.