JQuery Mobile lazy load list items
There is a working example here of using events scrollstart
and scrollstop
that should get you going in the right direction: http://jsfiddle.net/shanabus/LJTJt/
The documentation page is here: http://jquerymobile.com/test/docs/api/events.html
Hope this helps!
UPDATE
With this post, I was able to plug in a better example that shows detection at the bottom of the page. If your list is not at the bottom of the page, it won't work. Check your console for location debug information.
http://jsfiddle.net/shanabus/LJTJt/1/
Here it adds a new item when you reach the bottom of the list.
source to share
Simple code to load more items when reaching the bottom of the page.
if ($(window).scrollTop() > $('#page1').height() - 500) {
eventsElement.append('<li><a href="">Stop</a></li>');
eventsElement.listview('refresh');
}
As a complete example
Using jquery-mobile-iscrollview would be better. It provides pull and pull events
source to share