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:
- <?php for($i=0; $i <= 500; $i++){?>
-
- <li><a href='detail.html' class="list-link" data-prefetch="true" ><?php echo $i; ?></a></li>
-
- <?php }
- } ?>
This script is called with a jquery ajax classic:
- $(document).on("mobileinit", function(){
- $.mobile.defaultPageTransition = "slide";
-
- $("[data-role=header]").fixedtoolbar({ tapToggle: false });
- $("[data-role=footer]").fixedtoolbar({ tapToggle: false });
-
- $.mobile.getMaxScrollForTransition = function () { return 65536; }
-
- $.ajax({
- type: "GET",
- url: "http://www.xxx.it/ajax_jquery.php",
- data:"home_list",
- success: function(response){
-
- $(".home_list").html(response);
- myScroll.refresh();
-
- }
- });return false;
-
-
- });
And this the homepage of the app :
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
- <link rel="stylesheet" type="text/css" href="css/index.css" />
- <link href="css/ios/style.css" rel="stylesheet" />
- <link rel="stylesheet" href="css/style.css" />
-
- </head>
- <body>
- <!-- Start of first page -->
- <div data-role="page" id="home" >
- <div data-role="header" id='header' >
- <h1>Foo</h1>
- </div><!-- /header -->
- <div data-role="content" >
-
- <div id="wrapper">
- <div id="scroller">
-
- <ul data-role="listview" class="home_list">
-
-
- </ul>
-
- </div><!--Scroller-->
- </div> <!--Wrapper-->
-
- </div><!-- /content -->
- <div data-role="footer" id='footer' >
- <h4>Page Footer</h4>
- </div><!-- /footer -->
- </div><!-- /page -->
- <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
- <script type="text/javascript" src="js/iscroll.js"></script>
- <script src="js/custom.js"></script>
- <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
- <script type="text/javascript">
- var myScroll;
- function loaded() {
- myScroll = new iScroll('wrapper', { scrollbarClass: 'myScrollbar' });
- }
- document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
- document.addEventListener('DOMContentLoaded', loaded, false);
- </script>
- <script type="text/javascript" src="cordova-2.5.0.js"></script>
- <script type="text/javascript" src="js/index.js"></script>
- <script type="text/javascript">
- app.initialize();
- </script>
- </body>
- </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 !