我对 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>';
}