Delay between .load() and $(window).bind('load')

Question

I'm having a problem with a delay caused between the completion of:

var href = $('.mainNav').data('href');
$('#slideshow').load(href);   

This calls up a file which only contains an unsorted list and places it as the content of #slideshow. That part is in a $(document).ready function.

The next bit of code calls the plugin jCarousel to style the content of #slideshow and is outside the $(document).ready function:

$(window).bind('load', function () {
  $('#mycarousel').jcarousel();
});

The problem I'm having is that there's a slight delay between the list being loaded and the plugin formatting the list in which it is completely un-styled. Is there some way to make the second piece of code run before the list itself is displayed?

Answer 1

You could hide it with CSS:

#mycarousel {
  display: none;
}

And then display it once the jcarousel is set up:

$(window).bind('load', function () {
  $('#mycarousel').jcarousel();
  $('#mycarousel').show();
});

Also, I think it's strange that you're using $(window).bind('load', ...) with .load(), as .load() will not trigger a load event on window. Perhaps you should be using a callback for .load() sort of like:

$('#slideshow').load(href, function () {
  $('#mycarousel').jcarousel();
  $('#mycarousel').show();
});