0

私が直面している問題は、infinitescroll プラグインが最後の有効なページネーションに問題なく到達し、もう一度一番下までスクロールすると、最後の有効なコンテンツを再プルすることです。

つまり、ページ分割された有効なコンテンツ ページが 3 つある場合、

page/1 = ページ 1 のコンテンツを返します page/2 = ページ 2 のコンテンツを返します page/3 = ページ 3 のコンテンツを返します page/4 = ページ 3 のコンテンツを返します page/4 = ページ 3 のコンテンツを返します page/4 = ページ 3 のコンテンツを返します page/ 4 = ページ 3 のコンテンツなどを返します。

page/99 を入力しても、ページ 3 のコンテンツが返されます。

オンラインで調べたところ、存在しないページ分割されたページを呼び出そうとしたときに 404 を返すようにバックエンドを構成する必要があります。

これには2つの問題があります：

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 に答える