$().hide(); and .show() is different files - How?

[bambinou1980]

Hello,

 

 

I have 3 buttons on my website, 

I also have 3 divs with content in it(a lot of pictures in each).

 

So imagine that when someone clicks on the button A, DIV A shows up but DIV B & C hide.

 

What I am not too happy about is that I have noticed that even if the DIV are hidden, the whole graphics are loaded.

Is there a way to put the content into other files and only load the files when the user request it please so I can then load the page empty(onload only).

 

 

Thank you,

 

Ben

[cyberRobot]

You could dynamically create the image elements. When a button is clicked, you would unhide the corresponding <div>, create the necessary images with something like document.createElement(), and append the image elements to the <div> using something like Node.appendChild().

 

From there, you could just hide the <div> if another button is clicked. That way you don't have to load the images again.

[cyberRobot]

Since it looks like you are using jQuery, you'll probably want to use .add() instead:

http://api.jquery.com/add/

[CroNiX]

I'd just use ajax to retrieve the content.

You could start with your first tab populated, and show the tab.

The other tabs would be empty.

When clicking on the other tabs, check to see if they're empty, and if so retrieve content via ajax. If not just display the tab normally.

If user clicks on same tab again, it will already have the content and not fire the ajax request a 2nd time

if (this_tab_content.html() == '') //nothing in tab yet
{
  //fire ajax to retrieve content for this tab

  //success: function(response) {
  //  this_tab_content.html(response.tab_html); //on ajax success, replace content of tab with resulting html
  //}
}