如何快速获取json ajax数据并将其存储在localstorage中并将其显示在jquery移动列表视图中

Question

当我向服务器调用ajax时我获得了1000个数据， 我将该数据存储在本地存储中并显示在jQuery mobile中列表视图， 但这需要将近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个项目的列表视图，这是一个问题。

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

要解决这个问题，你需要重新设计你的listview逻辑。首先从服务器中仅拉出50个物品。第二个实现分页。基本上你需要发送一个参数给服务器，它是一个页码，用它来计算你应该发回的数据范围。

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

最好的解决办法是在达到页面底部时拉取新的数据集。这个cn很容易完成。我甚至会给你提供两个如何实现这个目标的例子。你可以使用名为Waypoints的jQuery插件的帮助来实现listview无限滚动。它可以用来检测listview已经到达底部，然后它会触发一个事件，可以用来拉另一组动态数据，增强过程将再次开始。

这将检测底端：

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

或者你可以在我的旧的例子来看看，看看它如何可以手动完成（我更喜欢这种解决方案在航点，它具有更好的底部检测） ：jsFiddle