jquery - 如何快速获取json ajax数据并将其存储在localstorage中并在jquery mobile listview中显示

Question

当我调用 ajax 到我的服务器时，我得到了 1000 条数据，我将该数据存储在我的本地存储中并在 jQuery 移动 ListView 中显示它，但这需要将近 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");

Answer 1

首先，您在这里无能为力。如果我理解正确的话，你正在显示一个包含 1000 个元素的 ListView ，这是一个问题。

想一想，您是在迫使 jQuery Mobile 生成并增强一个巨大的 ListView 。通过一些测量，jQuery Mobile 与 max 的 ListView 配合使用效果最佳。 50-60 件。

要解决此问题，您需要重新设计 ListView 逻辑。首先从服务器中仅提取 50 个元素。其次实现分页。基本上你需要向服务器发送一个参数，它是一个页码，用它来计算你应该发回哪个数据范围。

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

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

这将检测底端:

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

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