1

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.

4

2 回答 2

0

嗨，我通过使用setTimeout()函数在基于 phonegap 的 android 应用程序中解决了此类问题，希望它可以帮助你。

于 2013-05-16T07:10:43.000 回答
0

那你应该作弊。

jCarousel有一个初始化回调函数。让你的ul容器隐藏一点css：

display: block;

当jCarousel完成初始化时，只需通过回调函数显示ul容器。init

工作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>
于 2013-05-16T07:44:56.767 回答