1

我对json解析listview有一个问题，因为所有列表一次加载，所以需要很多时间，所以我希望找到一种方法让它像网页一样加载

这是我使用的代码

$.getJSON(url1, function(json) {
    $('#blogList li').remove();

    $.each(json.posts, function(i,dat) {

    output='<li data-icon="false">';
    output += '<a href="singlePost.html?id=' + dat.id + '">';
    output +='<div class="ui-li-aside">';
    output+='<h3 id="titleMain">' + dat.title + '&nbsp;(' + dat.comment_count + ')</h3>';
//  output+='<h4 id="authorMain">' + dat.author.name + '</h4>';
    //output+='<p class="ui-li-aside">';
    output += (dat.thumbnail) ?
      '<img id="img" src="' + dat.thumbnail + '" alt="' + dat.title + '" class="ui-li-icon-right" width="100px" height="100px"/>':
      '<img src="Untitled.png" alt="View Source Logo"  class="ui-li-icon-right" width="100px" height="100px"/>';
  //   output+='</p>';
    output +='</div>';
    output+='</a>';
    output+='</li>';

        $('#blogList').append(output);

    });
    $('#blogList').listview('refresh');
4

1 回答 1

1

您应该使用延迟加载方法仅加载列表视图滚动期间所需的内容。这种方式优化了移动应用程序的性能。

jquery.mobile.lazyloader是一个 jQuery Mobile 小部件，用于通过 AJAX 调用对服务器端资源进行延迟加载列表视图。这是一种优化包含 50 个或更多项目列表的移动应用程序性能的方法。

此外，我建议使用像Underscore.JS模板引擎这样的模板引擎，而不是使用连接创建 html 代码。

如果您不想使用延迟加载方法并希望保留当前的实现，请尝试将$('#blogList').append(output);循环移到外部。也尝试替换append为html. 我已将您的代码修改如下。您能否尝试以下实现是否提高了性能？

$.getJSON(url1, function (json) {
    var output = '';
    $.each(json.posts, function (i, dat) {
        output += [
                    '<li data-icon="false">',
                    '<a href="singlePost.html?id=', dat.id, '">',
                    '<div class="ui-li-aside">',
                    '<h3 id="titleMain">', dat.title, '&nbsp;(', dat.comment_count, ')</h3>',
                    (dat.thumbnail) ?
                        ['<img id="img" src="', dat.thumbnail, '" alt="', dat.title, '" class="ui-li-icon-right" width="100px" height="100px"/>'].join("") :
                        '<img src="Untitled.png" alt="View Source Logo"  class="ui-li-icon-right" width="100px" height="100px"/>',
                    '</div>',
                    '</a>',
                    '</li>'
                ].join("");
    });
    $('#blogList').empty().html(output).listview('refresh');
});
于 2013-06-23T11:04:24.680 回答