jquery Бесконечная прокрутка ленты с загрузкой контента Ajax-ом -- появление футера, отслеживание события пример кода

Как будем реализовывать

Всё просто - у нас будет:

• некий html элемент, которой в своих data атрибутах будет все необходимое для получения очередной порции контента.
• JS скрипт который используя изначальные данные элемента подгружает ленту, и останавливает подгрузку, если сервер указывает это передав res.finished = true (см. далее)

Управляющий элемент HTML

Предположим, что какую-то порцию контента мы грузим при открытии страницы, тогда управляющий элемент может выглядеть как-то так (здесь для присвоения значений использован синтаксис Smarty -- не пугайтесь, смысл в том, что вы можете установить эти значения при загрузке страницы каким-либо способом, не обязательно через данный шаблонизатор, в после же загрузки мы будем работать с ними через JS и менять их если нужно тоже средствами JS):

<div style="display: none" 
	 id="loader-manager" 
	 data-url="/load_projects_by_ajax/" 
	 data-limit="{$ProjectsLimit}" 
	 data-offset="{$ProjectsLimit}" 
	 <!-- далее список дополнительных парамертов, 
       необходимых для подгрузки конкретных данных	 -->
	 data-parent-id="{$ParentId}" 
	 data-year="{$ProjectsLoadYear}"  
	 data-parent-path="{$ParentPath}">
	<a href="#" class="link-new wide">тут можно что-то написать, если управлять по клику,
	но у нас элемент невидимый</a>
</div>

Скрипт подгрузки ленты

var projectsContainerId = '#projects-container'; // контейнер, в который добалять вновь загруженные данные
var distanceFromBottomToStartLoad = 500; // в пикселях -- за сколько пикселей до конца страницы начинать загрузку

/* Элемент руководящей загрузкой - в его полях содержим все опции необходимые 
  для выборки очередной порции данных или прекращения загрузки */
var loaderManagerElementId = '#loader-manager'; // элемент, руководящий загрузкой

$(document).ready(function()
{
   initScrollingLoad(); // инициаллизируем обработчик прокрутки и фоновую загрузку
});


var loadAjax = false; // индикатор выполняения запроса подгрузки ленты

function initScrollingLoad() {
    
    $loadManager = $(loaderManagerElementId); 
    $(window).scroll(function() {
               
      // Проверяем пользователя, находится ли он в нижней части страницы
      
      if (($(window).scrollTop() + $(window).height() > $(document).height() - distanceFromBottomToStartLoad) && !loadAjax) {
          
          
        console.log('infinit load event!!');
                 
         // Идет процесс
         loadAjax = true;
                 
         // Сообщить пользователю что идет загрузка данных
         // $this.find('.loading-bar').html('Загрузка данных');  
                 
         // Запустить функцию для выборки данных с установленной задержкой
         // Это полезно, если у вас есть контент в футере
         setTimeout(function() {
         
             var url =  $loadManager.data('url');
             
              var limit  =  $loadManager.data('limit');
              var offset  =  $loadManager.data('offset');
              var year  =  $loadManager.data('year');
              var parentPath   = $loadManager.data('parent-path');
              var parentId   = $loadManager.data('parent-id');
              
              $loadManager.data('offset', offset + limit); // сразу выставляем новое смещение для следующего запроса 
             
             var loadOptions = {
                 'limit':   limit ,
                 'offset': offset,
                 'year':  year,
                 'parent-path': parentPath,
                 'parent-id':  parentId
            }
             
             sendAjax(url, loadOptions); // передаём необходимые данные функции отправки запроса
                     
         }, 30);
                     
      }  
   });
}


function sendAjax(url, data)
{
    // showLoaderIdenity(); //  показываем идентификатор загрузки
    $.ajax({ //  сам запрос
    type: 'POST',
    url: url,
    data: data, // данные которые передаём  серверу
    dataType: "json" // предполоижтельный формат ответа сервера
    }).done(function(res) { // если успешно
       // hideLoaderIdenity(); // скрываем идентификатор загрузки
       
       appendHtml(res.html) // добавляем скаченные данные в конец ленты
       
       if (res.finished) { // если получили признак завершения прокрутки
           stopLoadTrying();
       }
       
       loadAjax = false; // укажем, что данный цикл загрузки завершён
       console.log('Ответ получен: ', res);
 
        if (res.success) { // если все хорошо
            console.log('ОК!)');
            
        } else { // если не нравится результат
            console.log('Пришли не те данные!');
            alert(res.message);
        }
    }).fail(function() { // если ошибка передачи
        //hideLoaderIdenity();
        loadAjax = false;
        console.log('Ошибка выполнения запроса!');
    });
}

/**
 * Добавим подгруженные данные в ленту
 * 
 * @param {type} html
 * @returns {undefined}
 */
function appendHtml(html) {
    $(projectsContainerId).append(html);
}


function stopLoadTrying() {
  $(window).off('scroll'); // отвязываем обработку прокрутки от окна
}

Примечания

• В скрипте выше мы обошлись без идентификатора загрузки (закомментирован), но если необходимо вы можете использовать это простое решение.

Источники:
(при написании в том числе использовались заметки):

1. Бесконечная прокрутка страницы с записями, средствами jQuery: http://xozblog.ru/2013/01/infinite-scroll/