Javascript 当选项卡未激活时，如何防止无限滚动加载页面？

我在一个使用Bootstrap4和jQuery的网站上工作，所以基本上有3个选项卡，每个选项卡都包含使用无限滚动插件滚动加载的砖石元素。 我基本上是在寻找一种方法，允许无限滚动加载标签内容，只有当标签是活动的。 假设我的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>

然而，一旦初始化，无限滚动不关心标签是否不再显示，并继续在后台加载内容，这会弄乱我所有的布局，使网站加载不必要的内容

因此，我用

$（“#v-pills-profile”）

尝试了以下条件：

但问题仍然是一样的，似乎如果无限滚动初始化一次，即使

$（“#v-pills-profile”）

失去其“活动”类，它也会继续加载页面

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

---

谢谢。

您是否尝试仅初始化激活选项卡中包含的

.grid

元素

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

---

什么是网格变量？

var grid=$container.mashise（{//mashise parameters}）（顺便说一句，砖石工程做得非常好）刚刚试过，同样的问题。无限滚动在我点击标签之前不会加载任何内容，但一旦我点击了标签，它就会继续加载内容，即使我切换了标签。我相信问题是，如果你初始化无限滚动一次，它将只工作，不会暂停，而标签是不活跃的。
$("#v-pills-profile-tab").on('shown.bs.tab', function () 
{ 
    if($("#v-pills-profile").hasClass("active"))
    {
        grid.infiniteScroll({
            path: '.pages'
            //other parameters
        });
    }
}

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