How to load images intelligently using CSS/jQuery?

Question

I have a thumbs div (i'm only showing four thumbs for the sake of brevity):

<div id="thumbs">
<img src="graphics/thumbs/01.jpg" width="190" height="190" class="thumb objects" id="project01" />
<img src="graphics/thumbs/08.jpg" width="190" height="190" class="thumb web" id="project08" />
<img src="graphics/thumbs/14.jpg" width="190" height="190" class="thumb freehand" id="project14"/>
<img src="graphics/thumbs/04.jpg" width="190" height="190" class="thumb freehand objects" id="project04" /></div>

and an empty div called 'content':

<div id="content"></div>

and a hidden div called 'preload':

<div id="preload">
<span id="project01_content"><img src="graphics/010.jpg" /></span>
<span id="project02_content"><img src="graphics/022.jpg" /><img src="graphics/021.jpg" /><img src="graphics/023.jpg" /><img src="graphics/020.jpg" /></span>
<span id="project03_content"><img src="graphics/030.jpg" width="450" height="600" /><img src="graphics/031.jpg" width="450" height="600" /></span>
<span id="project04_content"><img src="graphics/040.jpg" width="775" height="600" /><img src="graphics/041.jpg" width="775" height="600" /></span></div>

which I thought would be a nice way to preload all the images in the gallery. My jQuery uses the ID of the clicked thumbnail to clone() the images from the corresponding span and drop them into content using the html() method. The problem is, the gallery has a hundred images, not four, and already if I click one of the lower thumbnails the content div sits empty until ALL the other images before it are loaded.

What's the best way around this? My first thought is maybe there's a way to queue or de-queue image loading? Dim the thumbs till their content is loaded? Do away with the preload altogether in favor of a better way? And if so, how?

Answer 1

If you put IMG tags in the HTML, the browser will load all of them regardless if they are hidden or not. Different browsers do this in different ways, f.ex IE has less "slots" than chrome/ff.