1

すべてのリストが一度にロードされるため、リストビューのjson解析に問題があるため、リストが大きいほど時間がかかるため、Webページが1つずつロードされるようにロードする方法を見つけたいと考えています

ここに私が使用するコードがあります

$.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は、サーバー側リソースへの AJAX 呼び出しを使用してリストビューを遅延読み込みするための jQuery モバイル ウィジェットです。これは、50 以上のアイテムのリストを含むモバイル アプリケーションのパフォーマンスを最適化する方法です。

さらに、連結を使用して html コードを作成する代わりに、Underscore.JSテンプレート エンジンのようなテンプレート エンジンを使用することをお勧めします。

遅延読み込みアプローチを使用せず、現在の実装を維持したい場合は$('#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 に答える