Псевдо-непрерывная прокрутка

Question

Я хотел бы отобразить большое количество результатов без нескольких «страниц» для загрузки результатов «0-99» на странице 1, «100-199» на странице 2, «200-299» на странице 3 и т. Д.

Таким образом, моя идея заключается в создании своего рода псевдонепрерывного прокручиваемого списка данных. По сути, данные будут загружаться по мере необходимости, но только при прокрутке до. В этом случае поле данных должно было бы иметь логическую полосу прокрутки (я не уверен, как бы я это сделал в данный момент - возможно, только со стрелками). Кроме того, если загружаются огромные объемы данных, я полагаю, что старые данные необходимо будет удалить из памяти, чтобы не убить браузер. Как сделать все это в веб-интерфейсе, используя jquery (или любой другой javascript) на стороне клиента и php

Answer 1

Бен Надель сделал что-то очень похожее в своем блоге (по общему признанию в CF, а не в PHP, но код на стороне сервера действительно короткий), используя JQuery.

http://www.bennadel.com/blog/1803-Creating-A-Bidirectional-Infinite-Scroll-Page-With-jQuery-And-ColdFusion.htm

Приятной особенностью реализации Бена является то, что он очищает то, что вы прокручиваете мимо ... то есть вы не сталкиваетесь с этой бесконечной проблемой DOM.

Answer 2

ну, это, вероятно, будет довольно сложно, когда вы в него войдете, но в основном что-то вроде этого ...:

// PSEUDO CODE
$(document).ready(function(){
  $('#datascroller').scroll(function(){
      var tbl = $('table', this);
      var $this = $(this);
      if($('td:last', tbl).scrollTop() == tbl.height()*-1)
      {
         //clear current data and display loading animation
         tbl.fadeOut('fast', function(){
            $(this).replaceWith(loadingAnimationElement.hide());
            loadingAnimationElement.fadeIn('fast');
            $.get('/phpscript.php', {page: 2}, function(results){
               var $data = $(results).hide();
               loadingAnimationElement.fadeOut('fast', function(){
                  $(this).replaceWith($data);
                  $data.fadeIn('fast');
               })
            });
         });
      }
  });
});

Answer 3

У jQuery Tools есть демонстрация их прокручиваемого виджета , который звучит примерно так, как вы описываете.

Answer 4

Вы имеете в виду что-то вроде SortFolio ? Вы можете привязать к событию прокрутки с помощью jQuery, как и любой другой. Затем вы будете просматривать серию запросов xml get для ввода данных и добавлять или дополнять список, в зависимости от того, идет ли прокрутка вверх или вниз.