在每个列表项上动态添加按钮到控制组需要太长的jquery移动

Question

我对jquery mobile很新，所以这可能是一个微不足道的问题。文档不是jquery mobile集中的事实让我在stackoverflow上发布这个。

目前，我正在尝试加载listview，listview的每个项目都具有以下结构。选项按钮是一个控制组按钮，其下方有可变数量的按钮，再次从JSON接收。

目前大约有250个对象，它们是通过85 KB JSON从服务器获得的。由于内容的动态性，缓存数据有点棘手。

我遇到了一个问题，即加载此页面需要花费大约15秒的时间。为了找出导致它的原因，我在动态创建列表项的for循环中添加了时间戳值。

有趣的是，在为控制组创建HTML时，主要的瓶颈 - 在14秒内达到12个。

以下是选项按钮的图片，可让您了解HTML

我很想知道为什么在列表项上渲染动态控制组会导致如此多的延迟。我不知道如何缓存控制组，因为分组按钮也是动态的，并且是从JSON接收的。

＆LT;

我期待您的反馈，

由于 拉贾特

已添加EDIT代码段。我使用此例程生成每个列表项

foreach（$ jsonArray AS $ item）{

显示适配器

echo '<li>';
if($item['reactionCount'] > 0) {
    echo ' <a href="/planner/reactionbox/id:'. $item['jobId'] . '">';
    if(isset($item['requiresAction'])) {
        echo ' <span class="ui-li-count redBubble" style="background:#088A08"> </span>';
    } else { 
        echo ' <span class="ui-li-count redBubble" style="background:#6E6E6E"> </span>';
    }
} else {
    echo ' <a href="/planner/job-details/id:'. $item['jobId'] .'" name=\"job' . $item['jobId'] . '\">';
}

echo '<img style="float:left; padding: 11px 0px 0px 11px; width: 66px; vertical-align:middle;" 
        src="' . (($item['imageUrl'] != '') ? $item['imageUrl'] : '/img/website/profilephotodummy.png') . '" alt="dummyphoto" />
        <h3>' . $item['firstLine'] . '</h3>
        <p><strong>' . $item['secondLine'] . '</strong></p>
        <p>' . $item['thirdLine'] . '</p>
        <p class="ui-li-aside"><strong>' . $item['optionalLine'] . '</strong></p>
        </a>';

if(isset($item['actions'])) {
    echo '<div data-role="controlgroup" data-type="horizontal" style="margin-left: 15px;" data-mini="true">
    <select data-native-menu="false" data-theme="b" data-inline="true" data-mini="true" data-icon="gear" onchange="doJobAction(\'' . $currentUrl . '/\'+this.value); this.selectedIndex=0;">
    <option>' . __d('website','opties',true) . '';

    foreach ($item['actions'] AS $value) {

        # for every action from the JSON generate an action button dynamically ...
        if($value == 'annuleer_opdracht') {

            echo '<option value=" ' . $currentUrl . '/cancelJob:' . $flexbox['jobId'] . ' ">annuleer</option>';

        } else if($value == 'zoek_opnieuw') {

            echo '<option value="' . $currentUrl . '/newSearchJob:' . $flexbox['jobId'] . '">zoek opnieuw</option>';

        } else if($value == 'publiceer_externe') {

                                                            echo '<option value="' . $currentUrl . '/openForFreelancer:' . $flexbox['jobId'] . '">publiceer externe</option>';

        }
    }
    echo '</option></select></div>';
}
echo '</li>';
}