0

我对 jquery mobile 很陌生,所以这可能是一个微不足道的问题。jquery mobile 的文档不是集中的这一事实使我将其发布在 stackoverflow 上。

目前,我正在尝试加载一个列表视图,并且列表视图的每个项目都具有以下结构。选项按钮是一个控制组按钮,其下方有可变数量的按钮,同样从 JSON 接收。

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

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

有趣的是,在为控制组创建 HTML 时,14 秒中最多有 12 秒是主要瓶颈。

这是选项按钮的图像,可让您了解 HTML

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

在此处输入图像描述

<在此处输入图像描述

我期待您对此的反馈,

谢谢拉贾特

添加了编辑代码片段。我使用这个例程来生成每个列表项

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>';
} 
4

0 回答 0