Downsizing image load time

Expand Post »

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

hinodae

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

2 posts
since Dec 2008

Permalink

Dec 5th, 2008

Re: Downsizing image load time

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

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;
}

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

fizzix

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

2 posts
since Dec 2008

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: onclick text box?

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: iFrame resize - sort of repeat issue

DaniWeb Message

Cancel Changes

User Name
Password