Как загрузить содержимое веб-страницы на основе прокрутки пользователя

Ответ 1

Вообще говоря, вам понадобится какая-то структура вроде этого

....first page of content...
....first page of content...
....first page of content...
....first page of content...
....first page of content...
....first page of content...
....first page of content...
<div id="placeHolder"></div>

Затем вам нужно будет определить, когда вы приближаетесь к концу страницы, и выберите дополнительные данные

 $(window).scroll(function(){
      if  ($(window).scrollTop() == $(document).height() - $(window).height()){
           AddMoreContent();
      }
 });    

 function AddMoreContent(){
      $.post('getMoreContent.php', function(data) {
           //Assuming the returned data is pure HTML
           $(data).insertBefore($('#placeHolder'));
      });
 }

Вам может потребоваться сохранить переменную javascript, названную как lastId, которая хранит последний отображаемый идентификатор и передает его в приемник AJAX, чтобы он знал, какой новый контент будет возвращен. Затем в вашем AJAX вы можете позвонить

      $.post('getMoreContent.php', 'lastId=' + lastId, function(data) {
           //Assuming the returned data is pure HTML
           $(data).insertBefore($('#placeHolder'));
      });

Я сделал именно это на странице моей компании.

Ответ 2

Просто чтобы расширить Dutchie432. По моему опыту,

if ($(window).scrollTop() == $(document).height() - $(window).height())

может быть неверно неизменно (лично я не мог сделать это правдой, потому что это были прыгающие числа).
Кроме того, если пользователь прокручивается вверх и вниз, он может запускать множество запросов, а мы ожидаем возвращения первого вызова ajax.

Итак, что я сделал, чтобы заставить его работать, было использовать >= вместо ==. Затем, отменив scrollTop перед тем, как сделать мой запрос ajax. Затем привязываем его снова, если ajax возвращает какие-либо данные (что означает, что их может быть больше).

Здесь находится

<script type="text/javascript">
  $(document).ready(function(){                
        $(window).bind('scroll',fetchMore);
   });

   fetchMore = function (){
       if ( $(window).scrollTop() >= $(document).height()-$(window).height()-300 ){
           $(window).unbind('scroll',fetchMore);
            $.post('ajax/ajax_manager.php',{'action':'moreReviews','start':$('.review').length,'step':5 },
            function(data) {
               if(data.length>10){
                    $(data).insertBefore($('#moreHolder'));
                    $(window).bind('scroll',fetchMore);
               }
            });
        }
   }
</script>

`

Ответ 3

Вы имеете в виду динамическую прогрессивную загрузку.

Является довольно хорошо документированной концепцией, и есть даже некоторая встроенная поддержка для нее из разных библиотек. JQuery на самом деле имеет GridView, который, например, поддерживает прогрессивную загрузку.

Вам нужно будет использовать AJAX для реализации этой функции.

Ответ 4

Вы можете использовать jscroll плагин jquery

http://jscroll.com/

Ответ 5

Вы можете использовать некоторую библиотеку, например jQuery, для извлечения содержимого, а затем добавить его к содержимому страницы. Или вы можете использовать какой-либо плагин jquery следующим образом: http://gbin1.com/technology/jquerynews/20111017jquerypluginwaypoints/infinite-scroll/