如何在选项卡未激活时阻止无限滚动加载页面？

Question

我正在使用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
        });
    }
}

但问题仍然存在，似乎无限卷轴初始化一次，即使$("#v-pills-profile")失去其“活跃”类，它也只会继续加载页面。

任何建议或帮助将不胜感激。谢谢。

Answer 1

您是否尝试仅初始化激活的选项卡中包含的.grid元素？

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