jquery mobile lazy load with JSON

jquery mobile lazy load with JSON

Hope someone can help me, I am working on my first jquery mobile app. I am still new on this, I have one index page which includes three data role pages(get category, get posts, get posts content). and using getJSON() to fetch the data from my wordpress website. my problem is the delay of the listview. page appears empty for about 5 seconds then the lists appears in one time. I want the list appears one by one. not waiting for the all list to complete. also I want to know how to do lazy loading for the page. if you have any other solution for my problem. i will be appreciated. hope someone can help me on this. Thanks

  2. <!DOCTYPE html>
  3. <!--[if IEMobile 7 ]>    <html class="no-js iem7"> <![endif]-->
  4. <!--[if (gt IEMobile 7)|!(IEMobile)]><!--> <html class="no-js"> <!--<![endif]-->
  5.     <head>
  6.         <meta charset="utf-8">
  7.         <title>Touch Marketing & Advertising</title>
  8.          <!-- the three things that jQuery Mobile needs to work -->
  9.          
  10.         <link rel="stylesheet" href="js/jquery.mobile-1.4.2.min.css" /> 
  11.         <script src="js/jquery.js" type="text/javascript"></script>
  12.         <script src="js/jquery1.js" type="text/javascript"></script>
  13.         <script src="js/jquery-ui.js" type="text/javascript"></script>
  14.         <script src="js/my_jquery.js" type="text/javascript"></script>
  15.         <script src="js/jquery.mobile-1.4.2.min.js" type="text/javascript"></script>
  16.         <link rel="stylesheet" href="css/style.css" />
  17.         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  19.         

  21.     
  22.     </head>
  23.     <body>

  25.         <div id="home-page" data-role="page">
  26.             <div id="home-header" data-role="header">
  27.                 <h1><i class="icon-home"></i> Header</h1>
  28.             </div><!-- /#header -->
  29.             
  30.             <div id="home-content" data-role="content">
  31.             <ul data-role="listview" id="category_list" data-filter="true" data-theme= "a" data-inset="true">   </ul>
  32.             </div>
  33.             
  34.             
  35.             <div id="footer" data-role="footer">
  36.                 <h1><i class="icon-coffee"></i> 2014 - Touch Marketing & Advertising</h1>
  37.             </div><!-- /#footer -->
  38.         </div>
  39.         
  40.         <!----------------------------SECOND Page(Posts List)--------------------------------------------------->
  41.         <div id="SecondPage" data-role="page">
  42.             <div id="home-header" data-role="header">
  43.             <a href="#home-page" class="ui-btn-right">Back</a>
  44.                 <h3>Posts List</h3>
  45.             </div><!-- /#header -->
  46.             
  47.             <div  class="ui-content" data-role="content">
  48.             
  49.             <ul data-role="listview" id="posts" data-filter="true" data-inset="true"> </ul>
  50.          
  51.             </div>
  52.             
  53.              <div id="footer" data-role="footer">
  54.                 <h1><i class="icon-coffee"></i> 2014 - Touch Marketing & Advertising</h1>
  55.             </div><!-- /#footer -->
  56.         </div>
  57.         
  58.         
  59.         <!-----------------------------Third Page(Post Content)------------------------------------------------------>
  60.         
  61.         <div id="thirdPage" data-role="page" data-prefetch="true">
  62.             <div id="content-header" data-role="header">
  63.             <a href="#home-page" class="ui-btn-right">Back</a>
  64.                 <h1 id="PostTitle">Post Title</h1>
  65.             </div><!-- /#header -->
  66.             
  67.             <div id="PostContnet" class="ui-content" data-role="content">
  68.            
  69.             </div>
  70.              <div id="footer" data-role="footer">
  71.                 <h1><i class="icon-coffee"></i> 2014 - Touch Marketing & Advertising</h1>
  72.             </div><!-- /#footer -->
  73.         </div>
  74.         
  75.         <!------------- GET JSON URL---------------------------------------->
  76.         <script type="text/javascript" src="http://touch.ly/api/get_category_index/?callback=ShowCategory"></script>
  77.         

  79.     </body>
  80. </html>
    81.
Here is my Script







  8. /*---------------------------- This FUNCTION TO GET ALL CATEGORIES-----------------------------------------*/
  12. function ShowCategory(data){
  16. var output = '';
  17. $.each(data['categories'], function(k, val){
  19. output += '<li><a href="#SecondPage" onclick="ShowPosts('+val['id']+')"> \
  20.  '+val['title']+' <span class="ui-li-count">'+val['post_count']+'</span>\
  21.   </a></li>';
  22. });
  25. $('#category_list').append(output);
  26. }
  27. /*--------------------------------------------THIS FUNCTION TO GET CATEGORY POSTS----------------------------*/
  29. function ShowPosts(id){
  31. var postslist = '';
  32. $.getJSON('http://touch.ly/?json=get_category_posts&id=' + id + '&callback=?', function(data){
  34. $.each(data['posts'], function(k, val){
  36. $('#posts').empty();
  38. var input = val['date'];
  39. input = input.split("T")[0]; 
  40. var date = $.datepicker.parseDate("yy-mm-dd", input); 
  41. var newDateString = $.datepicker.formatDate("dd-mm-yy", date);
  44. var Post_title = val['title'];
  46. postslist +=  '<li><a href="#thirdPage" onclick="CatPostContent('+val['id']+')"> \
  47.  '+val['title']+' <br />\
  48.  <p class="ui-li-aside">'+newDateString+'</p></a></li>';
  49.  
  51. $('#posts').append(postslist);
  52. $('#posts').listview('refresh');
  53. });
  54. });
  55. }
  58. /*-------------------------------------GET POSTS CONTENT-----------------------------------------*/
  59. function CatPostContent(id){
  61. $.getJSON('http://touch.ly/?json=get_post&id=' + id + '&callback=?', function(data){
  65. var title= '<h2> '+ data.post.title+' </h2>';
  66. var content = '<p> '+ data.post.content +' </p>'
  68. $('#PostTitle').html(title);
  69. $('#PostContnet').html(content);
  70. console.log(title);
  72. });
  73. }
    75.