1

当我调用 ajax 到我的服务器时，我得到了 1000 个数据，我将这些数据存储在我的本地存储中并在 jQuery 移动列表视图中显示它，但这需要将近 50-60 秒来显示或加载数据。如何使这个过程快速？

这是我的代码：

var PollChallengeVoterDataUrl = ROOT+'testmaster/view/'+intCLMid+'/'+intCLTid+'/?UserId='+intUserId+'&UserRole='+intUserRole;
var data = "CampaignId="+IntCampaignId;

jQuery.ajax({
    url: PollChallengeVoterDataUrl,
    type: "GET",
    async: false,
    dataType: 'jsonp',
    jsonpCallback: 'Cconnect',
    data: data,
    success: function(response,request)
    {
        var statusresult=response.success;

        if(statusresult)
        {
            var data_arr = response.pollChallengeDetail[0];
            var data_len = response.pollChallengeDetail[0]['pollChallengeCount'];

            localStorage.removeItem(PollChallengeVoterList);
            if(data_len > 0)
            {
                $.each(data_arr, function(k, v) {

                    if(k == 0)
                    {

                    }
                    addToStorage(k,v,PollChallengeVoterList);
                });
            }
        }
    },
    error: function(e){
        alert('Error: ' + e);
    }
});
$.mobile.changePage('test.html', { transition:"slide" ,changeHash : true });

Test.html 显示代码

 <div data-role="content">   
 <ul data-role="listview" id="pollChallengeVoterList" data-divider-theme="b" data-inset="true"></ul>
 </div>

<script type="text/javascript" src="js/test.js"></script>

test.js 代码

var strDataResult = hasInStorage("PollChallengeCount",PollChallengeVoterList);
var strDataList = '';
$("#pollChallengeVoterList").html(strDataList);
var arrMainDataDetail = getArrayStorage(PollChallengeVoterList);

var intDataCount = arrMainDataDetail.pollChallengeCount;
for(j = 0; j < intDataCount; j++)
{
var intClmId = arrMainDataDetail.CLMid;
var intCvdId = arrMainDataDetail[j].CVDId;
var intCltId = arrMainDataDetail[j].CLTId;
var intPollChallengeVoterId = arrMainDataDetail[j].VoterId;
if(arrMainDataDetail[j].Voted == 0)
{
    var intFlg = 1;
}
else
{
    var intFlg = 0;
}

if(arrMainDataDetail[j].Challenged==1)
{
    var strChallengedColor = "#9F1335" ;
}
else
{
    var strChallengedColor = "" ;
}

if(arrMainDataDetail[j].AptUnitNo == "")
{
    strAddressRecord =arrMainDataDetail[j].AddressLine1;
}
else
{
    strAddressRecord =arrMainDataDetail[j].AddressLine1+' ,  # '+arrMainDataDetail[j].AptUnitNo;
}

if(arrMainDataDetail[j].Challenged==1)
{
    strVoterClass = "voted";
    strVoterStatus ='Challenged';
}
else
{
    if(arrMainDataDetail[j].Voted == 0)
    {
        strVoterClass = "voted";
        strVoterStatus ='Voted';
    }
    else
    {
        strVoterStatus ='Undo</span><span class="ui-li-count unvoted">Voted</span>';

    }
}

$('#pollChallengeVoterList').append('<li data-theme="c" data-icon="false"><a href="javascript:void(0)" style="color :'+strChallengedColor+'" data-transition="slide" onclick=ajaxupdatevote("'+intClmId+'","'+intCvdId+'","'+intCltId+'","'+intPollChallengeVoterId+'","'+intFlg+'","'+j+'")>'+arrMainDataDetail[j].LastName+', '+arrMainDataDetail[j].FirstName+'<span class="address" style="color :'+strChallengedColor+'">'+strAddressRecord+'</span><span class="ui-li-count '+strVoterClass+'">'+strVoterStatus+'</span></a></li>');
}

$("#pollChallengeVoterList").listview("refresh");
4

1 回答 1

2

首先，您在这里无能为力。如果我理解正确，您将显示 1000 个项目的列表视图，这是一个问题。

想一想，您正在迫使 jQuery Mobile 生成和增强一个巨大的列表视图。通过一些测量，jQuery Mobile 最适合最大列表视图。50-60 件。

要解决此问题，您需要重新设计列表视图逻辑。首先从服务器中提取 50 个项目。其次实现分页。基本上，您需要再向服务器发送一个参数，它是一个页码，用它来计算您应该发回的数据范围。

在客户端，您还需要实现分页。有两种可能的解决方案。您可以使用按钮来完成，就像在普通网页上一样。这可能是最简单的解决方案，但同时也不是最好的。

最好的解决方案是在到达页面底部时提取新的数据集。这个cn很容易做到。我什至会给你 2 个工作示例来说明如何实现这一点。您可以在名为Waypoints的 jQuery 插件的帮助下实现 listview 无限滚动。它可以用来检测listview已经到达底部，然后它会触发一个事件，该事件可以用来拉另一组动态数据，增强过程将重新开始。

这将检测底端：

$('#example-offset-pixels').waypoint(function() {
    //notify('100 pixels from the top');
}, { offset: 100 });

或者你可以看看我的旧示例，看看如何手动完成（我更喜欢这个解决方案而不是航路点，它有更好的底部检测）：jsFiddle

于 2013-05-10T07:46:11.353 回答