Эрмитаж и Ajax с автоподгрузкой

<? if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die();
/** @var array $arParams */
/** @var array $arResult */
/** @global CMain $APPLICATION */
/** @global CUser $USER */
/** @global CDatabase $DB */
/** @var CBitrixComponentTemplate $this */
/** @var string $templateName */
/** @var string $templateFile */
/** @var string $templateFolder */
/** @var string $componentPath */
/** @var CBitrixComponent $component */
$this->setFrameMode(true);

if (!$arResult["NavShowAlways"]) {
    if ($arResult["NavRecordCount"] == 0 || ($arResult["NavPageCount"] == 1 && $arResult["NavShowAll"] == false))
        return;
}

$strNavQueryString = ($arResult["NavQueryString"] != "" ? $arResult["NavQueryString"] . "&" : "");
$strNavQueryStringFull = ($arResult["NavQueryString"] != "" ? "?" . $arResult["NavQueryString"] : "");
?>
    <sc ript src="https://code.jquery.com/jquery-1.10.2.js"></sc ript>
    <!--  выполняем проверку по пагинации, empty ли 1 страница или нет, если да то выполняем скрипт-->
<?php if (empty($_GET['PAGEN_1'])): ?>
    <sc ript>
        var page;
        var maxpage =<?=$arResult["NavPageCount"]?>; //берём из массива ArResult общее кол-во страниц. (варьируется в зависимости от того сколько элементов 
              //вы выводите в своём компоненте)
        page = 1; //Общая картина вашего URL будет выглядеть так - http://your_site/?PAGEN_1=page где page номер страницы со следующим подгружаемым элементом.
        $(window).scroll(function () {
            var bottomOffset = 1200;
            var data = $(this).serialize();
            if ($(document).scrollTop() > ($(document).height() - bottomOffset) && !$('body').hasClass('loading')) {//стандартная проверка перед 
           //запуском основной функции.
                $('body').addClass('loading');
                if (maxpage > page) {
                    page++;
                    console.log('before scroll');
                    console.log(page);
                    BX.ajax( // аяковский запрос в Битриксе
                        {
                            url: "/?PAGEN_1=" + page, //URL к которому будем обращаться "http://вашсайт/?PAGEN_1=page"
                            method: 'POST',
                            dataType: 'html', //тип данных которые хотим получить
                            timeout: 0,
                            async: true,
                            processData: true,
                            scriptsRunFirst: false, //это важный момент,на каждой странице у вас вешается событие на ваши элементы к которым "прикручен" Эрмитаж,
                            //то есть на 1 странице у вас событие и скрипты только для тех элементов, что должны вывестись на 1 странице, на 2 - те, что
                            //для элементов 2 стр. и т.д.
                            //с помощью BX.ajax мы забираем сами элементы с нужной нам страницы, а так же скрипты и div bx-component-opener, false в данном
                            //случае нужен для того, чтобы
                            //полученные скрипты вешались только после получения и добавления на страницу нужных вам элементов вашего инфоблока или каталога, 
                            //или, что вы выводите.
                            //если будет стоять true то событие не будет повешано, оно будет загруженно раньше чем вставится html код вашего элемента.
                            emulateOnload: false,
                            start: true,
                            cache: false,
                            onsuccess: function (result) {
                                if (result) {
                                    console.log(page);
                                    var pars = $($.parseHTML(result)).find(".masonry").html(); // парсим нужную нам html страницу, далее ищем в ней 
                                    //разметку(div в данном случае) с классом masonry
                                    $('.masonry').append(pars); //вставляем в наш <div> полученные данные из инструкции pars.
                                    //весь код, что ниже особого значения для вас не играет, он нужен был мне для подставки элементов в isotop-filtr
                                    // и автоматической работе фильтра
                                    // при добавлении элементов во время скролла.
                                    var $container = $('.masonry');
                                    var $newElems = $(data).css({opacity: 0});
                                    $newElems.imagesLoaded(function () {
                                        $newElems.animate({opacity: 0});
                                        $(this).heightTrigger();
                                        $('.img-trigger').each(function () {
                                            $(this).imgTrigger();
                                        });
                                        selector = $('.selected').data('filter');
                                        $container.isotope({filter: selector});
                                        $container.isotope('destroy');
                                        $container.isotope({
                                            itemSelector: ".item",
                                            transitionDuration: '0.8s',
                                            hiddenStyle: {
                                                opacity: 0
                                            },
                                            visibleStyle: {
                                                opacity: 1
                                            },
                                            masonry: {
                                                columnWidth: ".grid-sizer",
                                                gutter: ".gutter-sizer",
                                            },
                                            filter: selector
                                        });
                                    });

                                }
                                console.log(page);
                                $('body').removeClass('loading');
                            }

                        });
                }
            }
        });

        var $optionSets = $('#filter'),
            $optionLinks = $optionSets.find('a');

        $optionLinks.click(function () {
            var $this = $(this);

            if ($this.hasClass('selected')) {
                return false;
            }
            var $optionSet = $this.parents('#filter');

            $optionSets.find('.selected').removeClass('selected');
            $this.addClass('selected');


            return false;
        });
    </sc ript>
<? endif; ?>