1

私は最近、運輸月間を祝って、ケープタウン市の運輸モバイル サイトを作成するという社会的取り組みに着手しました。うまく機能しているように見えますが、ユーザーから、特に 1 つのリストビューと戦っているという一貫したフィードバックを受け取っています。 aspx

リストは、ページの読み込み時に JSON オブジェクトを介して動的に作成されるため、ユーザーが場所のリンクをクリックしてリストを表示すると、最初のページの読み込み時に既に作成されているため、すぐに読み込まれるはずです。

遅延はデスクトップではなくモバイルでのみ問題になるようで、JQM listview-filter を使用している場合やリスト項目を選択している場合に発生します。以下は、場所のリストビューを生成するコードです。ご覧のとおり、このコードはマルチページが最初に読み込まれるときに 1 回実行されるため、ユーザーが場所のリストビューをクリックするまでに簡単に完了するはずです。JS を簡素化し、テスト用に APPKey を挿入しました。

if (event.type == 'pageinit') {
jsonURL = "http://api.wimt.co.za/v1/json/public.svc/" + "GetStopNames?op=metrorail&appKey=" + "9A4A49F1-7051-45C6-B4B1-10DF2C016874";

$.ajax({
    url: jsonURL,
    dataType: 'jsonp',
    success: function (data) {
        $.each(data, function (key, val) {
            items = [];
            $.each(data['GetStopNamesResult']['Results'], function (index, value) {
                if (value.charAt(0).toUpperCase() == curChar) {
                    items.push('<li class="ui-btn-icon-left" data-icon="arrow-l"><a href="#' + provider + '"  data-direction="reverse">' + value + '</a>');
                }
                else {
                    curChar = value.charAt(0).toUpperCase();
                    items.push('<li data-role="list-divider">' + curChar + '</li>');
                    items.push('<li class="ui-btn-icon-left" data-icon="arrow-l"><a href="#' + provider + '"  data-direction="reverse">' + value + '</a></li>');
                }
            });
            $('#locList').append(items.join(''));

            for (i = 0; i < items.length; i++) {
                items[i].replace('locListIcon', 'destListIcon');
            }
            $('#destList').append(items.join(''));
        });
    },
    error: function () {}
});

}

上記の JS が影響する HTML は次のとおりです。

        <!-- Start of Location Selection page -->
    <div data-role="page" id="GAloc" data-title="Golden Arrow Stop Locations" data-theme="a" data-content-theme="a">
        <div data-role="header" data-theme="e"><h1>Locations</h1><a data-rel="back">Back</a></div>
        <div data-role="content">   
            <ul id="locList" data-role="listview" data-inset="true" data-filter="true" data-split-theme="e" data-divider-theme="e"></ul>    
        </div>
        <div data-role="footer" class="header" data-theme="f"><img class="banner" src="../img/banner/greenpopBanner.png" alt="http://www.greenpop.org"/></div>
    </div>

これは、アイデアから公開するまでに 34 日間というクレイジーな作業でした。これは、私が理解できない最後のパフォーマンス関連の問題です。誰かがこれを正しくするのを手伝ってくれることを願っています。

ありがとう、デヴィン

4

0 に答える 0