Downsizing image load time

[hinodae]

I'm looking for a way to downsize the load of images on a page.

My current template provides the user with a tab based option set for different items that can be ordered,
the entire set is currently set as 1 form (i.e the quantity input fields), but on page load only 1 tab is displayed at a time on the page containing 4 or 5 images. The user has the ability to click on a tab, which inturn displays
a new set of product options. There are a total of 10 tabs and thus 40-50 total images that need to load
on the page. Each image requires an individual / unique call to my image server for loading. I would
like to set the code to ONLY load the images when a tab is clicked, rather than preloading and hiding
all the other images that are found within the other tabbed sections.

Does anyone know of a way to call for image loads ONLY when the tab is clicked, rather than
loading all images on initial page load.

By doing so, I'll be able to minimize the need to make up to 50 image server calls when the page is initially loaded. And load images when needed.

Thanks in advance for any advice on how to accomplish this

[fizzix]

Load the div contents into a javascript variable and set the contents when the tab is changed using

tab4Contents = '<this is the normal html code for the tab # 4><img src="wontBeLoadedUntilSetIntoTab" />';
function loadTab4() {
  document.getElementById('tab4').innerHTML = tab4Contents;
}

And to an onclick on the tab element that calls the function. If you need any help getting it to work, just ask!