Need help with a Gallery/Portfolio

I've tried hosting my WIP website to see how it works. Everything goes well except for the following:
On my Portfolio page:
[Portfolio] (http://grozav.t15.org/Portfolio.html)

I have coded a "gallery" in jquery.
When the page starts loading it seems that the browser loads the `#portfolioSlider` div which is supposed to be display:none until triggered. It contains lots of images resulting in massive load time until the thumbnails ( `#Portfolio` ) starts loading.

How can I make the `#portfolioSlider` images start loading only after it opens?

Thanks in advance!

But #portfolioSlider is display:block right from the start. Only the .portfolioSlide elements are display:none

But that can still not prevent all the images from loading. If you only want to load the images "just before" they show, you'll have to implement some sort of intelligent image pre-loading

Let's assume you only want to load the images from the tab that is already showing, so that the bigger images will immediately show. So on tab change you should add all the required images to the .portfolioSlide elements using javascript

var theElement = document.getElementById('tripfish');
var theSlideBG = theElement.getElementsByClassName('slideBG')[0];
var newImage = document.createElement('img');
newImage.src = 'gallery/tripfish.jpg';
newImage.width = 940;
newImage.height = 822;
theElement.insertBefore(newImage, theSlideBG);

You will have to do that for all the images on the current tab as soon as the tab changes