Question

I’m working on a gallery with jCarousel.
I’ve created a script that loads the next images to the gallery each time I click on the next button from an array. Each time I click next, the next five images are loaded. It all works really great, but my problem is that I see the empty

before the images are loaded, so half of the animation’s duration I only see empty squares moving.
I tried two solutions :
1) add a delay to the animation – after the

items are added to the carousel, add a wait of a second or two – which didn’t work for me, because it seems that part of the animation is to turn the newely added images to visible, so if I add a delay animation function, it does the exact same things (show empty squares for a moment)…

The interesting thing is that if I add an alert, when I dismiss it the images are already loaded and the animation is perfect – as if the code keeps running and the images are loaded – except the animation starts only after the alert is closed.

2) I tried to load the images to some invisible caching div, but of course I have to make it display:none, and again the same, the images are not loaded until the animation starts (and images are turned to display: block …

this is the line, event and function name I use to load the images:

itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback} 

I know this might be insufficient input and code, but the script became very long so if a specific part could be usefull (or all of it?) just let me know… I don’t want to clutter the message 🙂

Thanks for reading this,
Yan

Answer 1

I accomplished this by doing the following:

• as I’m assembling the new carousel LI nodes, I add image element but I don’t set the src attribute
• after I’m done adding the nodes to my carousel, I bind a method to the load event of the images. The load event increments a count of images that have loaded. Once the count is the same as the carousel size, then I know that all the images are loaded and I can start the animation.

e.g.

var imageLoadCount = 0;
var jcarousel = $("#myCarousel").data("jcarousel");

var imageLoaded = function() {

  imageLoadCount++;

  if(imageLoadCount === jcarousel.options.size) {
    // all the images have loaded.. begin the scroll
    jcarousel.options.auto = 5; // scroll every 5 seconds
    jcarousel.startAuto();
  }
};

var addItems = function(data) {

  jcarousel.size(data.length);

  $.each(data, function(index) {
    jcarousel.add(index + 1, getItemAsHtml(this));  // helper function to create node
  });

  $("img", carouselID).bind("load", imageLoaded);

  $("img", carouselID).each(function(index) {
    this.src = data[index].ImageUrl; // this triggers the image loaded event
  });
};

Note: this isn’t complete working code; it was edited to down for clarity. Also, keep in mind, the data I’m passing in to addItems() is array of json objects, each of which contains an ImageUrl property.