Q:

jCarousel Image gallery with thumbnails

I currently have an image gallery with 30 - 40 images.  Upon page load the user can visually see the images loading for a pretty significant amount of time (less than pretty).  The gallery is using jcarousel prev / next buttons to navigate to images as well as thumbnails.  I am looking for ways to optimize the way the gallery loads or at least the look of how the gallery is loading. One thought I had is below but wanted to know what the Stack Overflow community thoughts were on best way to address this.

Should I load first image and thumbnails, then images upon request?

Thank you in advance!

A:

We implemented this in our website do the following thing.

When you construct the carousel , don't construct all the images with src value with images
For the first four or five images have the images for src attributes
for the next all images store the image valvue in some custom value and give src as some other dummy value
Once you click next in the carouse swap the values of src and your custom variables
for loading you can show a default loading symbol
You can improve performance way better with this approach

for example all your next images in your carouse should look something like this
<img height="0px" width="0px" border="0" alt="Hidden Depths" title="Hidden Depths" id="yourimage.jpg" class="carouselImage">

once you click swap the image src
 $('yourimage').attr('src','yourimage');

after that your code should look as below
<img height="0px" width="0px" border="0" alt="Hidden Depths" title="Hidden Depths" src="yourimage.jpg" class="carouselImage">

