0

我遇到的问题是无限滚动插件可以很好地到达最后一个有效分页，然后如果您再次滚动到底部，它会重新拉出最后一个有效内容。

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

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

如果我输入 page/99 它仍然返回第 3 页的内容。

从网上看，我需要将后端配置为在尝试调用不存在的分页页面时返回 404。

我有两个问题：

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

2）即使我可以访问，我也不知道如何修复它。

这是文章的链接，说明这是问题所在：

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

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

4

1 回答 1

0

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);
        });
    });
}
于 2012-03-29T14:28:45.537 回答