Hi, I am making a mootools photo gallery. I want to have all my markup in the HTML, and control it with a bit of external mootools. My problem is that the gallery may have 20 thumbnails, and 20 big images. I want the 20 thumbnails to load straight away, but I only want the first big image to load. When the second thumb is clicked on, the gallery will grab the second big image from the server and display it.
So far I have achieved this by making an array of image sources in the js, and making a function, such that if thumb number 2 is clicked on, then big_img_src_array[2] is loaded. This works, but I have a lot of ugly markup-ish stuff in my js, If I put in <img src="myImage.jpg" style="display: none;" /> the browser will still load the image into the cache. Is there any way to do things the mootools way, without loading 20 giant images when the page loads? Thanks, Matt.
