Can Javascript force hidden divs to wait to load their contents? (HTML/Javascript)

Question

I have a fairly basic thumbnail-and-view page going. As each thumbnail is clicked, the central pane shows the full-size image. This bit works fine - I'm using Javascript to show and hide the divs which contain the large images, but as the page first loads, it starts loading all of the images at the same time. This causes the first image the user sees to be brought in very slowly.

I have experimented with creating the divs on the fly, but then I'm stuck with the undesirable effect of having to wait for load of every image. Ideally, I'd like to use my current setup - just show and hide divs - and have the hidden divs start loading their contents as soon as the first pane has completed. Is there a way to set the loading priority on visible divs, such that hidden ones don't get network time until all visible divs are rendered?

Answer 1

I think what you want there is to combine your 'creating the divs on the fly' (for the non-visible divs) with image preloading. Should get you what you're looking for.

Answer 2

Also, see this question, which may help:

http://stackoverflow.com/questions/334325/how-to-display-loading-status-with-preloader-and-multiple-images