Using JCarousel above the fold - loading JCarousel before page has finished loading?

Question

Hi there,

I'm currently using JCarousel to highlight "featured posts" in Wordpress. The carousel displays above the fold, as part of our header. It works well once it loads, but since we're using it above the fold on a large page with many elements, it has to wait for our entire page to load before it will initiate and display our featured posts. This means it sits there with a "loading" gif for 5-10 seconds, and most users will just scroll by it rather than wait for it to load.

<script type="text/javascript"> 
    jQuery(document).ready(function(){ 
        jQuery('#mycarousel').jcarousel({ scroll : 2 }); 
    }); 
</script>

This slow loading is bothersome, and therefore, I'd like to have the carousel load first, so it will show up before the rest of the page has loaded. Is there any way for me to do this?

Any suggestions would be greatly appreciated. Thanks!

Answer 1

what about preloading of #mycarousel contents ? If you look into the source of jCarousel Plugin, the author haven't written any block of code for preloading the contents ( for example Images ). So try preloading the contents of your selector before rest of the elements in your page are still loading

I can show you an example,

    $(document).ready(function() {
         var img;   
         $('#mycarousel').find('img').each(function() {
              img = new Image();
              img.src = $(this).attr('src');   //preloads your Images
         });

         $(img).load(function() {  //perform action after the last Image is loaded
              $('#mycarousel').jcarousel(); 
         });

    });

Answer 2

I'd see what is making your page take so long to load. Post your URL or use Firebug to look at your page load and resources. Are your images too large? Are you loading too many scripts or duplicate copies of jQuery? Have you tried loading jQuery from a CDN like Google with Use Google Libraries « WordPress Plugins?

You can trigger a display:none on elements below the slider until the page loads; i.e.:

document.write('<style type="text/css">element{display:none}</style>');
jQuery(function($) {
$('element').css('display','block');
});

But I'd figure out why the page load is slow first.

Answer 3

Just as a followup, here's what I ended up doing to solve my problem:

Since the Facebook widget and Twitter widgets in my sidebar took forever to load, and were loading before the carousel, I turned them into external javascripts (loaded the Facebook iframe through a javascript using this method: http://www.seomofo.com/wordpress/tweetmeme-retweet-button.html) and called them on window.onload, so they would start loading dead last.

Now the jcarousel loads before both Facebook and Twitter's widgets, making it show up sooner and appear to take much less time to load. Although I believe my overall page load time is the same, I at least found a way to rearrange things so the items at the top of my page would show up before the slow-loading widgets in the sidebar.

Thanks for all your help! Glad to have this resolved.