jCarousel Image gallery with thumbnails

Question

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!

Answer 1

We implemented this in our website do the following thing.

1. When you construct the carousel , don't construct all the images with src value with images
2. For the first four or five images have the images for src attributes
3. for the next all images store the image valvue in some custom value and give src as some other dummy value
4. Once you click next in the carouse swap the values of src and your custom variables
5. for loading you can show a default loading symbol
6. 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">

Answer 2

Yes, lazy-loading of images is very neat technique to improve performance. You should show some of them (depending of size). Then jCarousel has a way of loading dynamically the rest of images:

jQuery('#mycarousel').jcarousel({
    itemLoadCallback: mycarousel_itemLoadCallback
}); 

You can define that callback to load new images via JavaScript or via AJAX. See examples: http://sorgalla.com/projects/jcarousel/#Examples

Also I know this plugin http://www.appelsiini.net/projects/lazyload that lazy-loads the images when scrolling, playing with the src attributes, as kobe suggested. It doesn't fit directly to your case, but the source code will give you a better idea of implementing it.