什么原因导致无限滚动过早加载？

Question

什么原因导致无限滚动过早加载？

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首曲目已经加载完毕，其余的曲目也很快加载完毕。

好像还有其他东西触发了无限滚动，因为它肯定不是我在屏幕上的位置。当页面加载时，容器的底部并没有出现在视野中。是什么触发了这个问题呢？这不是回调函数的问题，因为我最近才添加了它，并且在此之前就遇到了这些问题。

- user1427661

尝试使用$(document).ready()包装一下？这样它可能会在所有页面元素渲染之前加载。 - James_1x0

不幸的是，无法实现 :-( - user1427661

我有同样的问题，你解决了吗？ - LeeTee

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- James_1x0 · Answer 1

你可以稍微修改一下，尝试这个：

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

只有当视口距离底部200像素时，此函数才会被触发。