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

Kopusha

#45611 16.04.2022 07:01

подключаем js плагин jquery.infinitescroll.js
дописываем такой код в свой main.js

        
          
          
              
              if( $('.pagination__next').length )         // Если есть следующая страница в пагинации
{
 
    //infiniteScroll in Folio
    $container = $('.container-scrl');
     
    $container.infiniteScroll({
      // options
      path: '.pagination__next',
      append: '.post-scrl',
      history: false,//не меняем урл при подгрузке что бы не путать пользователя
      prefill: true,
      scrollThreshold: 800,
      //history: 'push', //прописывает в историю и титл стр текущую стр
      //historyTitle: true,
      //button: '.view-more-button',//пока кнопку убрал
    });
 
    //дело в том что на догруженных элементах могут быть свои js которые не включаться
    //включить их надо после загрузки например как ниже
    //это специфика для конкретного сайта, тебе это может и не нужно, но как принцип я оставил
    $container.on( 'append.infiniteScroll', function( event, response, path, items ) {//включаем нужные функции для вновьсозданных объектов
                        $('.files-list-grid .files-list-grid-wrapper').css("opacity", 0);
                        $('.stories-list-grid .stories-list-grid-wrapper').css("opacity", 0);
                        // set a timer to re-apply the plugin
                        if (resizeTimer) clearTimeout(resizeTimer);
                        resizeTimer = setTimeout(collage, 200);
                         
    });
 
    $container.on( 'append.infiniteScroll', function( event, response, path, items ) {//включаем нужные функции для вновьсозданных бъектов
      jQuery("[data-toggle=popover]").popover();
      jQuery("[data-toggle=tooltip]").tooltip();
    });
 
    // просмотр историй без пагинации для гугланалитики
    var link = document.createElement('a');
     
    $container.on( 'append.infiniteScroll', function( event, response, path ) {
      link.href = path;
      ga( 'set', 'page', link.pathname );
      ga( 'send', 'pageview' );
    });
     
}

            

        
      

и сама TPL

<div class="container-scrl">  
<!-- one story -->    
<!-- BEGIN: PRD_ROWS -->
<!-- article -->      
<article class="storiesart portstories-item post-scrl" itemprop="itemListElement" itemscope itemtype="http://schema.org/WebPage">
<!-- тут собственно сама запись -->           
<!-- важно обратить внимание на класс post-scrl в теге article -->    
</article>
<!-- article -->
<!-- END: PRD_ROWS -->
<!-- one story -->    
</div>    
 
<!-- PAGINATION -->   
        <!-- IF {PAGENAV_COUNT} > 1 -->
        <a class="pagination__next" style="display: none" href="{PHP.sys.canonical_url}&d=2" title="Load more stories">Load more stories</a>
        <!-- ENDIF -->
<!-- PAGINATION -->   
<!-- важно обратить внимание что что если есть постраничное разбитие - то есть есть более 1 страницы - сработает js infiniteScroll jquery.infinitescroll.js -->