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?

+3


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!

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.

+8


source


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



see code here .

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

Git hub link

+3


source


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

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

0


source







All Articles