Используя данное решение, можно избавиться от необходимости загружать из базы данных сразу весь контент, что значительно увеличит скорость загрузки всей страницы и уменьшит нагрузку на сервер баз данных.
И так, преступим непосредственно к реализации. Для начала на нужно кастомизировать шаблон компонента system.pagenavigation, он должен выглядеть примерно следующим образом:
<?if(!defined("B_PROLOG_INCLUDED")|| B_PROLOG_INCLUDED!==true)die(); $this->setFrameMode(true); if(!$arResult["NavShowAlways"]){ if($arResult["NavRecordCount"] ==0 || ($arResult["NavPageCount"] == 1 && $arResult["NavShowAll"] ==false)) return;}?> <div class="bottom_pager_ajax" style="clear:both;width:100%; height:1px;"> </div> <script type="text/javascript"> //записываем количество страниц var count = <?=$arResult["NavPageCount"];?> //первый запрос происходит для второй страницы var begin = 2; var endScroll = false; //определяем положение нашего пагинатора на странице var getApprovalLoanPos = $('.bottom_pager_ajax').offset().top; $function(){ //если есть еще элементы, которые мы не вывели, //то при скролле до пагинатора показываем следующию порцию элементов $(window).scroll(function(){ var bodyScroll = $(window).scrollTop() + $(window).height(); var scrollResult1 = getApprovalLoanPos - bodyScroll; if(scrollResult1 < 50 && !endScroll && begin <= count){ endScroll = true; loader(); } }) }); //функция отправки ajax запроса function loader(){ //показываем стандартный прелоадер битрикса BX.showWait(); $.ajax({ url: "<?=$APPLICATION->GetCurPage();?>?PAGEN_1=" + begin, type: "POST", data: ({ resize: 'Y' }), success: function(data){ BX.closeWait();//скрываем стандартный прелоадер битрикса $(".more_ajax").append(data);//добавляем эелементы на страницу begin++;//переопределяем счетчик getApprovalLoanPos = $('.bottom_pager_ajax').offset().top; endScroll = false; }, fail: function(){ //если ajax запрос не прошел, тогда просто //скрываем стандартный прелоадер битрикса BX.closeWait(); }}); } </script>
Затем на нужно кастомизировать шаблон вывода наших элементов (шаблон компонента news.list, section.list и т.д. у кого что использовалось):
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die(); $this->setFrameMode(true);?> <ul class="more_ajax"> <?//если запрос ajax, то очищаем буфер if(IS_AJAX && $_REQUEST['resize'] == "Y") $APPLICATION->RestartBuffer();?> <?foreach ($arResult['ITEMS'] as $key => $arItem): $this->AddEditAction($arItem['ID'], $arItem['EDIT_LINK'], $strElementEdit); $this->AddDeleteAction($arItem['ID'], $arItem['DELETE_LINK'], $strElementDelete, $arElementDeleteParams);?> <li> <!-- Тут вывод описания вашего элемента --> </li> <?endforeach;?> <?//если запрос ajax, то очищаем буфер if(IS_AJAX && $_REQUEST['resize'] == "Y")die();?> </ul> <?if($arParams["DISPLAY_BOTTOM_PAGER"]):?> <?=$arResult["NAV_STRING"]?> <?endif;?>