jQuery Mobile LIMIT list view 25 items

Question

This will be ported to phonegap for a native app. I have a filtered list that contains approximately 1,000 entries. Each entry will have a unique image and unique text. I've been testing it and there are obvious performance issues. It takes about 30 seconds to load and when you search for something, it takes another 30 seconds to show you the items.

I was wondering if there was a way to limit the list to 20 or 25 items and when the user scrolls down, the app will continue filtering items (simliar to gmail for android). That way the app will respond quicker.

Here's an example jsFiddle. You will not experience any performance issues because all images are the same and there are only a handful of items, but you can see the structure.

<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Type Search Criteria" data-filter-theme="c">
        <li class="ad"><a href='#xpage'>
             <img src="http://www.appmalt.info/AMobile/Birdapp/img/none.jpg"/>
            <h2>Abcdefghijklmnopqr</h2>
            <p><i>amessage</i></p>
            <p class="ui-li-aside" ><i class='icon-remove'></i><font color="#cccccc" >NOT SEEN</font></p>
        </a></li>
        <li class="ad"><a href='#xpage'>
            <img src="http://www.appmalt.info/AMobile/Birdapp/img/none.jpg"/>
            <h2>Abcdefghijklmnopqr</h2>
            <p><i>amessage</i></p>
            <p class="ui-li-aside"><i class='icon-ok'></i><font color="green" style='font-weight:bold;padding-left:0.7em;'>SEEN IT!</font></p>
        </a></li>
   ...
   *****CONTINUE THIS FOR 1000 ENTRIES****
   ...
</ul>

score 2 · Accepted Answer · edited May 23 '17 at 12:22

You could use this

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
       //Place ajax call here
   }
});

(Credits to Ran How do I use JQuery to detect if a user scrolls to the bottom of the page?)

Place an ajax call instead of the alert to make a request for the next X entries. You'll have to keep a counter (so you know which entries you ask for).

//Maybe the math in the if statement need some fixes. It depends on your project.

//Be aware of this problem that might occur involving your size of content JQuery Mobile User scroll to bottom . Credits to davehale23

Thanks! This looks promising. I know next to nothing about ajax. But I'll look around see if I can figure something out. Thanks! — bagofmilk, May 16 '13 at 19:41

score 1 · Answer 2 · answered Feb 19 '14 at 09:26

You could use this

var timer    = setInterval(function () {
    scrollOK = true;
}, 100),
scrollOK = true,
count    = 20;
$(window).bind('scroll', function () {
if (scrollOK) {
    scrollOK = false;
    if ($(this).scrollTop() + $(this).height() >= ($(document).height() - 100)) {
        //now load more list-items because the user is within 100px of the bottom of the page
        console.log('You Hit Bottom!');
        var out = [];
        for (var i = 0; i < 10; i++) {
            out.push('<li>' + (count++) + '</li>');
        }
        $('ul').append(out.join('')).listview('refresh');
    }
}
});

http://jsfiddle.net/knuTW/

jQuery Mobile LIMIT list view 25 items

2 Answers2