jQuery Mobile lazy load list items

Question

How do you know that you are at the bottom of a list in jQuery Mobile, I need to lazy load in more results when the end of the list is reached?

Answer 1

there is a jq mobile plugin names lazyloader that would help .

link :http://dcarrith.github.com/jquery.mobile.lazyloader

Answer 2

There is a working example of using scrollstart and scrollstop events here, that should get you going in the right direction: http://jsfiddle.net/shanabus/LJTJt/

Documentation page here: http://jquerymobile.com/test/docs/api/events.html

Hope this helps!

UPDATE

With help from this post, I was able to wire up a better example that does detection against the bottom of the page. If your list view is not in the bottom of the page, this will not work as well. Check the console for some position debug information.

http://jsfiddle.net/shanabus/LJTJt/1/

Here it only adds a new item when you reach the bottom of the list.

Answer 3

Simple code to load more items on reaching page bottom.

 if ($(window).scrollTop() > $('#page1').height() - 500) {
        eventsElement.append('<li><a href="">Stop</a></li>');
        eventsElement.listview('refresh');
 }

For full example,

see Code here.

Using jquery-mobile-iscrollview will be better. It provides pull down and pull up events

Git hub link