1

我最近开始为我所在的开普敦市创建一个交通移动网站，以庆祝交通月。它似乎运作良好，但是我从用户那里收到一致的反馈，他们特别是在与一个列表视图作斗争，这是加载到这个多页中的“位置”列表视图：http: //findmyway.mobi/GoldenArrow/index。 aspx

该列表是通过页面加载时的 JSON 对象动态创建的，因此我希望一旦用户单击位置链接以显示列表，它应该立即加载，因为它已经在初始页面加载时创建。

滞后似乎只在移动设备而不是台式机上出现问题，并且在使用 JQM listview-filter 以及选择列表项时会发生。下面是生成位置列表视图的代码。如您所见，此代码在最初加载多页时运行一次，因此在用户单击位置列表视图时应该很容易完成。我已经简化了 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