Search code examples
javascriptjqueryhtmljquery-mobilejcarousel

Delay of few seconds while using jcarousel framework on mobile device on pageshow() event

I'm using an jQuery framework - jcarousel.js to order some items horizontally on a page in my mobile app builded in jQuery Mobile+ HTML.

When I navigating to page,first I getting from web service all the images, putting them in a vertical list - <ul> dynamically using JavaScript , and calling the script from index this way:

   $('#imagesPage').live('pageshow', function (event, ui) {
        jQuery('#imagesList').jcarousel({visible:2});
   });

It works fine in some mobile device's, but in iPhone for example while navigating to that page, it done slowly, so you see first the vertical list and after 1-2 sec it changes to horizontal list.

How can I improve it so I wont see the few seconds changing delay from vertical to horizontal and show the page only after list was orginzed currectly.

Solution

  • Then you should cheat.

    jCarousel has an init callback function. Let your ul container be hidden with a little css: 

    display: block;

    When jCarousel finishes its initialization just show ul container through init callback function.

    Working HTML : 

    <!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <link rel="stylesheet" href="http://sorgalla.com/projects/jcarousel/skins/tango/skin.css" />    
        <style>
            .hidden {
                display: none;
            }
        </style>
        <script src="http://sorgalla.com/projects/jcarousel/lib/jquery-1.9.1.min.js"></script>
        <script src="http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js"></script>                    
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>    
        <script>
            $(document).on('pagebeforeshow', '#index', function(){ 
                $('#mycarousel').jcarousel({        
                    scroll: 1,
                    initCallback:   carouselInit
                });
            });

            function carouselInit() {
                $('#mycarousel').show();
            }
        </script>
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="b" data-role="header">
                <h1>Index page</h1>
            </div>

            <div data-role="content">
                <ul id="mycarousel" class="jcarousel-skin-tango hidden">
                    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt=""/></li>
                    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt=""/></li>
                    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt=""/></li>
                    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt=""/></li>
                    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt=""/></li>
                    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt=""/></li>
                    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt=""/></li>
                    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt=""/></li>
                    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt=""/></li>
                    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt=""/></li>
                </ul>
            </div>
        </div>    
    </body>
</html>