Question

我正在使用jQuery框架 - jcarousel.js在jQuery Mobile + HTML中构建的移动应用中，在页面上水平排序某些项目。

当我导航到页面时，首先我从网络服务获取所有图片，并将它们放在垂直列表中<ul>动态使用JavaScript ，并以这种方式从索引调用脚本：

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

它可以在某些移动设备中正常工作，但在导航到该页面的iPhone中也是如此慢慢完成，所以你先看到垂直列表，1-2秒后它会变成水平列表。

我怎样才能改进它，所以我不会看到从垂直到水平的几秒钟改变延迟，并且只在列表被当前开始后显示页面。

Answer 1

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

Answer 2

然后你应该作弊。

jCarousel 有一个init回调函数。让您的 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>

在pageshow（）事件中在移动设备上使用jcarousel框架时延迟几秒钟

2 个答案: