Подгрузка контента при скролле через ajax

Используя данное решение, можно избавиться от необходимости загружать из базы данных сразу весь контент, что значительно увеличит скорость загрузки всей страницы и уменьшит нагрузку на сервер баз данных. И так, преступим непосредственно к реализации. Для начала на нужно кастомизировать шаблон компонента 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;?>


В примере использовалась константа IS_AJAX, посмотреть её запись можно тут