AJAX

Downsizing image load time

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Dec 2008

Posts: 2

Reputation: hinodae is an unknown quantity at this point

Solved Threads: 0

hinodae

Offline

Newbie Poster

Downsizing image load time

Dec 4th, 2008

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

•

Join Date: Dec 2008

Posts: 2

Reputation: fizzix is an unknown quantity at this point

Solved Threads: 0

fizzix

Offline

Newbie Poster

Re: Downsizing image load time

Dec 5th, 2008

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

 Help with Code Tags 
 Javascript Syntax (Toggle Plain Text) 
tab4Contents = '<this is the normal html code for the tab # 4><img src="wontBeLoadedUntilSetIntoTab" />';
function loadTab4() {
  document.getElementById('tab4').innerHTML = tab4Contents;
}
tab4Contents = '<this is the normal html code for the tab # 4><img src="wontBeLoadedUntilSetIntoTab" />';
function loadTab4() {
  document.getElementById('tab4').innerHTML = tab4Contents;
}