Вместо автоматической загрузки большего количества элементов списка, я предлагаю разместить кнопку, которую пользователи могут нажать, чтобы загрузить больше (но это только мое предложение).
//setup an interval so we can throttle the `scroll` event handler since there will be tons of `scroll` events fired
var timer = setInterval(function () {
scrollOK = true;
}, 100),//run this every tenth of a second
scrollOK = true;//setup flag to check if it's OK to run the event handler
$(window).bind('scroll', function () {
//check if it's OK to run code
if (scrollOK) {
//set flag so the interval has to reset it to run this event handler again
scrollOK = false;
//check if the user has scrolled within 100px of the bottom of the page
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
}
}
});
Вот демонстрационная версия: http://jsfiddle.net/knuTW/
Обновление
Немного проще просто загрузить кнопку, которую пользователь может нажать, затем, когда она нажата, загрузить больше строк и затем снова добавить кнопку load-more в конец списка.:
var $loadMore = $('ul').children('.load-more');
$loadMore.bind('click', function () {
var out = [];
for (var i = 0; i < 10; i++) {
out.push('<li>' + (count++) + '</li>');
}
$('ul').append(out.join('')).append($loadMore).listview('refresh');
});
Вот демоверсия: http://jsfiddle.net/knuTW/2/