JQM 1.3.1 long list performace ! there are solutions?

JQM 1.3.1 long list performace ! there are solutions?

Hi , i try to use new framework JQM 1.3.1 to create an app that, i hope, I will distribute on the app store.

Unfortunatly i have serius problems with a list of items from my server. Practicaly i would to create in the home page a list of posts from my blog. Oviusly, initialy, i show only 10 title, then, the user can tap on last button and add other posts from the blog.

To try the list i have create a simple script on my server that generate 500 item to show in the app:






  1. <?php for($i=0; $i <= 500; $i++){?>
  2.    
  3.     <li><a href='detail.html' class="list-link" data-prefetch="true" ><?php echo $i; ?></a></li>
  4.    
  5. <?php    }
  6. } ?>


This script is called with a jquery ajax classic:

  1. $(document).on("mobileinit", function(){
  2.           $.mobile.defaultPageTransition = "slide";
  3.          
  4.          $("[data-role=header]").fixedtoolbar({ tapToggle: false });
  5.          $("[data-role=footer]").fixedtoolbar({ tapToggle: false });
  6.                    
  7.            $.mobile.getMaxScrollForTransition = function () { return 65536; }
  8.          
  9.           $.ajax({
  10.               type: "GET",
  11.               url: "http://www.xxx.it/ajax_jquery.php",
  12.               data:"home_list",
  13.               success: function(response){
  14.                
  15.                 $(".home_list").html(response);
  16.                 myScroll.refresh();
  17.                                                                                    
  18.                                      }
  19.                                 });return false;
  20.            
  21.          
  22. });

And this the homepage of the app :

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">    
  6.     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
  7.     <link rel="stylesheet" type="text/css" href="css/index.css" />
  8.     <link href="css/ios/style.css" rel="stylesheet" />
  9.     <link rel="stylesheet" href="css/style.css" />   
  10.        
  11. </head>
  12. <body>
  13. <!-- Start of first page -->
  14. <div data-role="page" id="home" >
  15.     <div data-role="header" id='header' >
  16.         <h1>Foo</h1>
  17.     </div><!-- /header -->
  18.     <div data-role="content" >
  19.    
  20.     <div id="wrapper">
  21.            <div id="scroller">
  22.        
  23.         <ul data-role="listview" class="home_list">         
  24.             
  25.    
  26.         </ul>
  27.           
  28.            </div><!--Scroller-->
  29.     </div> <!--Wrapper-->     
  30.        
  31.     </div><!-- /content -->
  32.     <div data-role="footer" id='footer' >
  33.         <h4>Page Footer</h4>
  34.     </div><!-- /footer -->
  35. </div><!-- /page -->
  36. <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  37. <script type="text/javascript" src="js/iscroll.js"></script>
  38. <script src="js/custom.js"></script>
  39. <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
  40. <script type="text/javascript">
  41. var myScroll;
  42. function loaded() {
  43. myScroll = new iScroll('wrapper', { scrollbarClass: 'myScrollbar' });
  44. }
  45. document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
  46. document.addEventListener('DOMContentLoaded', loaded, false);
  47. </script>
  48. <script type="text/javascript" src="cordova-2.5.0.js"></script>
  49. <script type="text/javascript" src="js/index.js"></script>
  50. <script type="text/javascript">
  51.             app.initialize();
  52. </script>
  53. </body>
  54. </html>


The list is show correctly and i have added iscroll to have a good scroll of the page, but if a click on the last item (not only on the last) the transition between pages is very,very,very,very slow . I think that my code is good, why i obtain this problem?

Oviusly in this condition i can't continue with development.

Thanks for help !