CODEWITHSUNDEEP
jqueryjquery-mobile
Mohamed Osama
Mohamed Osama

Reputation: 11

jquery mobile json listview - all the list loaded at one time

i have a problem with json parsing listview as all the list loaded at one time so take many time as its big so i hope to find a way that make it loaded as how a webpage loaded one by one

here is the code i use

$.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');

Upvotes: 1

Views: 1222

Answers (1)

Apostolos Emmanouilidis
Apostolos Emmanouilidis

Reputation: 7197

You should use a Lazy Loading approach to load only the content needed during a listview scroll. This way optimizes the performance of a mobile application.

jquery.mobile.lazyloader is a jQuery Mobile Widget for lazy loading listviews with AJAX calls to a server-side resource. It is a way to optimize the performance of mobile applications that contain a list of 50 or more items.

In addition, I would recommend to use a template engine like Underscore.JS template engine instead of creating html code using concatenations.

If you don't want to use a Lazy Loading approach and want to keep your current implementation then try to move the $('#blogList').append(output); outside the loop. Also try to replace append with html. I have modified your code as following. Could you try whether the below implementation improves the performance?

$.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');
});

Upvotes: 1

Related Questions