Question

为了庆祝运输月，我最近开始为我的开普敦市创建一个交通移动站点的社交活动。它似乎运行良好，但我收到用户的一致反馈，他们正在与一个列表视图进行斗争，这是加载到这个多页面的“位置”列表视图：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天，从想法到发布，这是我无法理解的最后一个与性能相关的问题。我希望有人可以帮助我做到这一点。

谢天谢地，德文

JQM Listview加载缓慢并单击

0 个答案: