Question

I have a jCarousel which loads fairly slowly. The images will display as a list first before turning into a carousel view. This also causes the other jquery scripts on the page to be delayed. I have tried preloading the images but it doesn’t seem to have any effect on how fast my images turn into a carousel.

Is there any way I can ensure that my entire carousel is preloaded before it is displayed?

Answer 1

I use the following pattern:

var imgCount = $("#carousel img").length;
var loadCounter = 0;

$("#carousel img").one("load", function() {
    loadCounter++;
    if(loadCounter == imgCount) {

        // all images have loaded, fire up carousel
        $("#carousel").carousel();
    }
}).each(function() {
    if(this.complete) $(this).trigger("load");
});