Question

我正在开发我的第一个jquery移动应用程序。我有一个索引页面，其中包括三个数据角色页面（获取类别，获取帖子，获取帖子内容）。并使用getJSON（）从我的wordpress网站获取数据。我的问题是listview的延迟。页面显示为空约5秒钟，然后列表一次显示。我希望列表逐一出现。不等待所有列表完成。我也想知道如何为页面进行延迟加载。如果您对我的问题有任何其他解决方案。我将不胜感激。希望有人可以帮助我。谢谢

这是我的索引文件

 <head>
    <meta charset="utf-8">
    <title>Touch Marketing & Advertising</title>
     <!-- the three things that jQuery Mobile needs to work -->

    <link rel="stylesheet" href="js/jquery.mobile-1.4.2.min.css" /> 
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/jquery1.js" type="text/javascript"></script>
    <script src="js/jquery-ui.js" type="text/javascript"></script>
    <script src="js/my_jquery.js" type="text/javascript"></script>
    <script src="js/jquery.mobile-1.4.2.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/style.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">




 </head>
 <body>

    <div id="home-page" data-role="page">
        <div id="home-header" data-role="header">
            <h1><i class="icon-home"></i> Header</h1>
        </div><!-- /#header -->

        <div id="home-content" data-role="content">
   <ul data-role="listview" id="category_list" data-filter="true" data-theme= "a" 
   data-inset="true">   </ul>
        </div>


        <div id="footer" data-role="footer">
            <h1><i class="icon-coffee"></i> 2014 - Touch Marketing & Advertising</h1>
        </div><!-- /#footer -->
    </div>

    <!----------------------------SECOND Page(Posts List)------------------------------->
    <div id="SecondPage" data-role="page">
        <div id="home-header" data-role="header">
        <a href="#home-page" class="ui-btn-right">Back</a>
            <h3>Posts List</h3>
        </div><!-- /#header -->

        <div  class="ui-content" data-role="content">

        <ul data-role="listview" id="posts" data-filter="true" data-inset="true"> </ul>

        </div>

         <div id="footer" data-role="footer">
            <h1><i class="icon-coffee"></i> 2014 - Touch Marketing & Advertising</h1>
        </div><!-- /#footer -->
    </div>


    <!-----------------------------Third Page(Post Content)-------------------------------->

    <div id="thirdPage" data-role="page" data-prefetch="true">
        <div id="content-header" data-role="header">
        <a href="#home-page" class="ui-btn-right">Back</a>
            <h1 id="PostTitle">Post Title</h1>
        </div><!-- /#header -->

        <div id="PostContnet" class="ui-content" data-role="content">

        </div>
         <div id="footer" data-role="footer">
            <h1><i class="icon-coffee"></i> 2014 - Touch Marketing & Advertising</h1>
        </div><!-- /#footer -->
    </div>

    <!------------- GET JSON URL---------------------------------------->
    <script type="text/javascript" src="http://touch.ly/api/get_category_index/?
          callback=ShowCategory"></script>

  </body>
 </html>

这是我的剧本

    /*----------------- This FUNCTION TO GET ALL CATEGORIES---------------------------------*/



    function ShowCategory(data){



                    var output = '';
                    $.each(data['categories'], function(k, val){

                    output += '<li><a href="#SecondPage" onclick="ShowPosts('+val['id']+')"> \
    '+val['title']+' <span class="ui-li-count">'+val['post_count']+'</span></a></li>';
                        });


                    $('#category_list').append(output);             
                }
    /*---------------------------------THIS FUNCTION TO GET CATEGORY POSTS-------------------*/

    function ShowPosts(id){

        var postslist = '';
        $.getJSON('http://touch.ly/?json=get_category_posts&id=' + id + '&callback=?',

        function(data){

            $.each(data['posts'], function(k, val){

                $('#posts').empty();

                var input = val['date'];
                input = input.split("T")[0]; 
                var date = $.datepicker.parseDate("yy-mm-dd", input); 
                var newDateString = $.datepicker.formatDate("dd-mm-yy", date);


                var Post_title = val['title'];

            postslist +=  '<li><a href="#thirdPage" onclick="CatPostContent('+val['id']+')"> \
                              '+val['title']+' <br />\
                              <p class="ui-li-aside">'+newDateString+'</p></a></li>';


                $('#posts').append(postslist);
                $('#posts').listview('refresh');
            }); 
        });         
    }


    /*-------------------------------------GET POSTS CONTENT---------------*/
    function CatPostContent(id){

        $.getJSON('http://touch.ly/?json=get_post&id=' + id + '&callback=?', function(data){



            var title= '<h2> '+ data.post.title+' </h2>';
            var content = '<p> '+ data.post.content +' </p>'

            $('#PostTitle').html(title);
            $('#PostContnet').html(content);
                console.log(title);

        });
    }

使用getJSON加载jquery延迟

0 个答案: