我正在使用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首曲目已经加载完毕,其余的曲目也很快加载完毕。
好像还有其他东西触发了无限滚动,因为它肯定不是我在屏幕上的位置。当页面加载时,容器的底部并没有出现在视野中。是什么触发了这个问题呢?这不是回调函数的问题,因为我最近才添加了它,并且在此之前就遇到了这些问题。