Как запретить Infinite Scroll загружать страницы, когда вкладка не активна? - PullRequest
Новая
       16

Как запретить Infinite Scroll загружать страницы, когда вкладка не активна?

0 голосов
/ 15 февраля 2019

Я работаю над сайтом с Bootstrap 4 и jQuery, поэтому в основном есть 3 вкладки, каждая из которых содержит элементы кладки, которые загружаются при прокрутке с помощью плагина Infinite Scroll.Я в основном ищу способ, позволяющий Infinite Scroll загружать содержимое вкладки, только если вкладка активна.Допустим, мой HTML выглядит так: 

<div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
        <div class="grid" id="grid1">
            <!-- PHP script that generates the content for each element in that tab -->
        </div>                          
    </div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
        <div class="grid2" id="grid2">
        <!-- second PHP script that generates the content for each element in that tab-->
        </div>
    </div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
        <div class="grid3" id="grid3">
         <!-- third PHP script that generates the content for each element in that tab -->
        </div>
    </div>
</div>

Для инициализации кладки и бесконечной прокрутки я использую событие начальной загрузки shown.bs.tab следующим образом: 

$("#v-pills-profile-tab").on('shown.bs.tab', function () { 
    grid.infiniteScroll({
        path: '.pages'
        //other parameters
    });
});

Однако после инициализации,Infinite Scroll не заботится о том, что вкладка больше не отображается, и продолжает загружать контент в фоновом режиме, что портит всю мою структуру кладки и заставляет сайт загружать контент без необходимости.

Так что я попробовал следующее условие с$("#v-pills-profile"): 

$("#v-pills-profile-tab").on('shown.bs.tab', function () 
{ 
    if($("#v-pills-profile").hasClass("active"))
    {
        grid.infiniteScroll({
            path: '.pages'
            //other parameters
        });
    }
}

Но проблема остается той же, похоже, что если Infinite Scroll инициализируется один раз, он просто продолжит загрузку страниц, даже если $("#v-pills-profile") потеряет свой «активный» класс.

Любой совет или помощь будет принята с благодарностью.Спасибо.

1 Ответ

0 голосов
/ 15 февраля 2019

Вы пытались инициализировать только элемент .grid, содержащийся в активированной вкладке? 

$("#v-pills-profile-tab").on('shown.bs.tab', function() { 
    var activeGrid = $('.tab-pane.active').children('.grid');
    if (!InfiniteScroll.data(activeGrid[0])) {
        activeGrid.infiniteScroll({...});
    }        
}
...