jQuery Mobile LIMIT list view 25 items

Question

Это будет портировано в телефонную таблицу для родного приложения. У меня есть отфильтрованный список, содержащий около 1000 записей. Каждая запись будет иметь уникальный образ и уникальный текст. Я тестировал его, и есть очевидные проблемы с производительностью. Загрузка занимает около 30 секунд, а когда вы ищете что-то, требуется еще 30 секунд, чтобы показать вам предметы.

Мне было интересно, есть ли способ ограничить список 20 или 25 элементами, и когда пользователь прокрутит вниз, приложение продолжит фильтрацию элементов (simliar to gmail для android). Таким образом, приложение будет реагировать быстрее.

Приведен пример jsFiddle. У вас не будет проблем с производительностью, потому что все изображения одинаковы, и есть только несколько элементов, но вы можете увидеть структуру.

<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Type Search Criteria" data-filter-theme="c"> 
     <li class="ad"><a href='#xpage'> 
      <img src="http://www.appmalt.info/AMobile/Birdapp/img/none.jpg"/> 
      <h2>Abcdefghijklmnopqr</h2> 
      <p><i>amessage</i></p> 
      <p class="ui-li-aside" ><i class='icon-remove'></i><font color="#cccccc" >NOT SEEN</font></p> 
     </a></li> 
     <li class="ad"><a href='#xpage'> 
      <img src="http://www.appmalt.info/AMobile/Birdapp/img/none.jpg"/> 
      <h2>Abcdefghijklmnopqr</h2> 
      <p><i>amessage</i></p> 
      <p class="ui-li-aside"><i class='icon-ok'></i><font color="green" style='font-weight:bold;padding-left:0.7em;'>SEEN IT!</font></p> 
     </a></li> 
    ... 
    *****CONTINUE THIS FOR 1000 ENTRIES**** 
    ... 
</ul> 

Answer 1

Вы можете использовать этот

$(window).scroll(function() { 
    if($(window).scrollTop() + $(window).height() == $(document).height()) { 
     alert("bottom!"); 
     //Place ajax call here 
    } 
}); 

(кредиты на Ран How do I use JQuery to detect if a user scrolls to the bottom of the page?)

Разместить Аякса вызов вместо уведомления, чтобы сделать запрос на последующие записи X. Вам нужно будет держать счетчик (чтобы вы знали, какие записи вы запрашиваете).

// Может быть, математика в инструкции if нуждается в некоторых исправлениях. Это зависит от вашего проекта.

// Помните об этой проблеме, которая может возникнуть в связи с размером вашего контента JQuery Mobile User scroll to bottom. Кредиты davehale23

Answer 2

Вы можете использовать этот

var timer = setInterval(function() { 
    scrollOK = true; 
}, 100), 
scrollOK = true, 
count = 20; 
$(window).bind('scroll', function() { 
if (scrollOK) { 
    scrollOK = false; 
    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 
     console.log('You Hit Bottom!'); 
     var out = []; 
     for (var i = 0; i < 10; i++) { 
      out.push('<li>' + (count++) + '</li>'); 
     } 
     $('ul').append(out.join('')).listview('refresh'); 
    } 
} 
}); 

http://jsfiddle.net/knuTW/