Question

我正在使用Paul Irish的Infinite-Scroll类插件。我的基本HTML结构是这样的：

<div class="container">
<div class="track">
a bunch of other html
</div>
<div class="track">
a bunch of other html
</div>

我有100个曲目，每个曲目分组为10个。对分页的调用工作正常，所以我不会包含该代码。这是我的无限滚动jQuery代码：

jQuery(function($) {
    $('.charts-container').infinitescroll({
        navSelector: '.navigation',
        nextSelector: '.next-page',
        itemSelector: '.track',
        loading: { img: "<?php echo get_template_directory_uri() . '/images/ajax-loader-spinner.gif'; ?>",
                   msgText: '',
                   finishedMsg: ''
                }
    }, function(arrayOfNewElems) {
          // bind newly generated audio elements -- media events don't bubble
          $('audio').on('ended', function(e) {
            $(e.currentTarget).prev('.play-button').find('.pause-img').addClass('js-hidden');
            $(e.currentTarget).prev('.play-button').find('.play-img').removeClass('js-hidden');
          });
    });

这很有效。它获取正确的数据并正确填充页面，无故障地执行回调。问题是当我开始在页面上滚动时开始加载，所以在我甚至远程接近页面底部之前，已经加载了20个好的轨道，其余的很快加载。

好像其他东西正在触发无限滚动，因为它肯定不是我在屏幕上的位置。页面加载时，容器底部不可见。有什么可以触发这个？这不是回调，因为我最近才补充说，之前我遇到过这些问题。

Answer 1

你可以稍微破解它并试试这个：

$(window).scroll(function() {
    if($(window).offset().bottom < 200) {
        $(".charts-container").DoSomething//ETC...
    }
});

仅当视口距离底部200px时才会触发该函数。

什么可能导致无限卷轴过早加载？

1 个答案: