Sorry I assume this has been discussed, but I couldn't find anything quite what I needed from searching the forums...

Basically I'm loading lets say... 50 images on a single page, all are display:none, except for the first one... , so you don't see the images as they load, but they are loading for a while in the background.

I need to load the images in a particular order, not just the order they appear in the HTML, so say I need to load the first 3 images of the 'doodles' section, the 'illustrations' section and the 'life' section.... then after the first 3 of each of those sections are loaded, continue loading the other images after those priority images are loaded.

Is there a decently lightweight/easy way to do this?