Preloading Entire Element

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 开发者_StackOverflowdelayed. 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?

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");
});

One option could be to hide the containing div for the carousel using CSS, and then unhide it (using Javascript) just before the carousel script runs.

That way, the images will not be displayed at all until the page is ready and the script is about to execute.

I normally load stuff like slide-shows (html + images) in:

$(window).load(function() {
  // load and start slideshow when rest of page is loaded
});

That ensures that it only gets loaded when the rest of the page is completely ready (not just the DOM, but all other images are loaded as well).

Additionally you can hide the contents of the carousel and add a .load() event to each image to count how many images are loaded and display the whole thing when they are all ready. I handle that myself, but I don´t know the jCarousel plugin, perhaps it offers that functionality already.