html5 - how to get json ajax data fast and store it in localstorage and display it in jquery mobile listview -

when call ajax server got 1000 data, store data in local storage , display in jquery mobile list-view, take 50-60 sec display or load data. how make process fast?

here code:

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 display code

 <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 code

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"); 

first of there isn't can here. if understood correctly displaying listview of 1000 items , problem.

think it, forcing jquery mobile generate , enhance huge listview. measurements jquery mobile works best listview of max. 50-60 items.

to fix problem need redesign listview logic. first pull 50 items server. second implement pagination. need send 1 more parameter server , page number, use calculate data range should send back.

on client side need implement pagination. there 2 possible solutions. can buttons, on normal web page. easiest solution @ same time not best.

best solution pull new set of data when page bottom has been reached. cn done. give 2 working examples of how can achieved. can implement listview infinite-scroll of jquery plugin called waypoints. can used detect listview has reached bottom, trigger event can used pull set of dynamic data , enhancement process start again.

this detect bottom end:

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

or can take @ older example , see how can done manually (i prefer solution on waypoints, has better bottom detection): jsfiddle