Search code examples
jqueryajaximagelazy-loadingload-time

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!

Solution

  • 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">