3

我正在使用 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 个很好的曲目，其余的很快就加载了。

好像有别的东西在触发无限滚动，因为它肯定不是我在屏幕上的位置。页面加载时看不到容器的底部。什么可能触发这个？这不是回调，因为我最近才添加了它，而且我之前也遇到过这些问题。

4

1 回答 1

0

您可以稍微破解一下并尝试以下操作：

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

仅当视口距离底部 200 像素时才会触发该功能。

于 2013-11-06T21:10:48.727 回答