0

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?

CSED
  • 33
  • 1
  • 5

1 Answers1

0

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();
});
bkconrad
  • 2,620
  • 3
  • 20
  • 30
  • Did you mean visibility: hidden;? If so that didn't work, but display: none; did. Works flawlessly now. Thanks a bunch. – CSED Aug 08 '12 at 02:25
  • Ah, yes I did mean `display: none`. Glad I could help – bkconrad Aug 08 '12 at 02:27
  • #slideshow wouldn't work for the .load() because it's a div I think. I read somewhere that they don't trigger load events, I just tried it as well and it didn't work. window does though, no idea. – CSED Aug 08 '12 at 02:31