1

jQueryフレームワークを使用しています - +で構築jcarousel.jsされたモバイルアプリのページでいくつかのアイテムを水平に並べます。jQuery MobileHTML

ページに移動するとき、最初に Web サービスからすべての画像を取得し、それらを垂直リストに入れます -<ul>を動的に使用しJavaScript 、次のようにインデックスからスクリプトを呼び出します。

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

一部のモバイル デバイスでは問題なく動作しますが、たとえば iPhone では、そのページに移動するときにゆっくりと実行されるため、最初に垂直リストが表示され、1 ～ 2 秒後に水平リストに変わります。

どうすれば改善できるので、垂直から水平に数秒変化する遅延が表示されず、リストが正しく作成された後にのみページが表示されます。

4

2 に答える 2

0

それからあなたはカンニングするべきです。

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>
于 2013-05-16T07:44:56.767 に答える