Question

我遇到的问题是infinitescroll插件到达最后一个有效分页然后再次滚动到底部，它会重新拉出最后一个有效内容。

即。如果我有3个有效的分页内容页面，

page / 1 =返回第1页内容   page / 2 =返回第2页内容   page / 3 =返回第3页内容   page / 4 =返回第3页内容   page / 4 =返回第3页内容   page / 4 =返回第3页内容   page / 4 =返回第3页内容   等...

如果我放入第/ 99页，它仍会返回第3页内容。

从在线查看我需要配置后端在尝试调用不存在的分页页面时返回404。

我有两个问题：

1）我的客户的网站在SquareSpace.com上托管（他们根本不能访问404或非常后端）

2）即使我有访问权限，我也不知道如何修复它。

以下是文章的链接，说明这是问题：

https://github.com/paulirish/infinite-scroll/issues/49

如果有人可以提供帮助，我会非常感激！

Answer 1

我通过向infinite-scroll回调添加一个计数器来解决问题，如下所示：

var total = $j(".pagination a:last").html();
var pgCount = 1;
var numPg = total;

    // jQuery InfiniteScroll Plugin.
    container.infinitescroll({
        navSelector  : '.pagination',
        nextSelector : '.pagination a:first',
        itemSelector : '.journal-entry-wrapper',
        animate: true,
        loading: {
            finishedMsg: 'No more content to load.',
            img: 'http://i.imgur.com/6RMhx.gif'
        }
    },
    // Trigger Masonry as a callback.
    function( newElements ) {
        pgCount++;

        if(pgCount == numPg) {
            $j(window).unbind('.infscr');
            container.masonry('reload');
            container.append( newElements ).masonry( 'appended', newElements, true );
            $j('#infscr-loading').find('em').text('No more content to load.');
            $j('#infscr-loading').animate({
                opacity: 1
            }, 200);
            setTimeout(function() {
                $j('#infscr-loading').animate({
                    opacity: 0
                }, 300);
            });
        } else {
            loadPosts(newElements);
        }
    }); 

});

function loadPosts(newElements) {
    // Hide new posts while they are still loading.
    var newElems = $j( newElements ).css({ opacity: 0 });
    // Ensure that images load before adding to masonry layout.
    newElems.imagesLoaded(function() {
        // Show new elements now that they're loaded.
        newElems.animate({ opacity: 1 });
        container.masonry( 'appended', newElems, true );

        // Animate opaque post covers on hover.
        $j(newElems).hover(function() {
            $j(this).find('.postCover').stop(true, true).fadeOut(200);
        }, function() {
            $j(this).find('.postCover').stop(true, true).fadeIn(200);
        });
    });
}

无限滚动jQuery插件不断填充最后一页

1 个答案: