jCarousel won't hide during load

JavaScript
1

I’m trying to get jQuery to hide jCarousel images while they load using the following code. It actually worked at one point but refuses to now (which makes me think it’s a minor syntax issue). ‘#carousel’ is the containing ul element. You can see I’ve tried it a few different ways. No errors appeared in Chrome’s debugging console. “show(‘slow’)” doesn’t work either…

      /* Hide jCarousel 
         */ 
//        $('.jcarousel-container').css('visibility', 'hidden');   
//        $('#carousel').css('visibility', 'hidden'); 
          $('#carousel').hide();    

        $(window).load(function() 
        { 
                $('#jcarousel-loading').hide(); 
//                $('.jcarousel-container').css('visibility', 'visible'); 
//                $('#carousel').css('visibility', 'visible'); 
                $('#carousel').show('slow'); 
        }); 

       /* Show jCarousel 
         */
$(document).ready(function() 
{ 
        $('#carousel').jcarousel({ 
        });

        $("a.fancypopbox").fancybox();

});
2

In css:

#carousel { visibility: hidden; }

Simplify js.

$(document).ready(function()
{
                $('#jcarousel-loading').hide();
                $('#carousel').css('visibility', 'visible');
                $('#carousel').jcarousel({
                });

});

ta da

3

What was the reason for hiding it in the first place? Was it because of some loading issue? I would just be hesitant to have the slideshow hidden via CSS, as those with JS off will never see anything at all.

4

Yes, hidden so the list of images don’t stack down the page until jCarousel kicks in.

Have tried with $(‘#carousel’).css(‘visibility’, ‘hidden’); at the top, outside the doc ready function without luck, so unless you have any other suggestions please?

Frankly, think i’d rather the carousel hidden if the user has js disabled :wink:

(Don’t know how anybody can surf the interwebs these days without js)

5

A better solution would be to fix the height of the slideshow container (assuming that the slides are all the same height) and also set it to overflow: hidden. That’s how I prevent that initial page load overflow.

6

Nice one. I’ll try that, thanks!