JQuery Mobile lazy load list items

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


source to share

3 answers

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!


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.


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



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


As a complete example

see code here .

Using jquery-mobile-iscrollview would be better. It provides pull and pull events

Git hub link



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

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



All Articles