2

これが何が起こっているかです。「home.html」という html ドキュメントがあります。多くの div が含まれており、これらの div のそれぞれが 1 つの投稿です。index.html もあり、その中に div #content があります。index.html のコンテンツは空ですが、.load() 呼び出しによって home.html の div で埋められます。また、.load 呼び出しで div:nth-child(-n + 10) を使用すると、最初の 10 件の投稿のみを読み込むことができます。waypoint.js を使用してこれに無限スクロールを追加するにはどうすればよいですか? そのため、スクロール バーが一番下まで 75% に達すると、home.html から次の 10 div が読み込まれます。

4

2 に答える 2

4

ページに 10 個の要素をロードしたら、アクションをトリガーする jquery ウェイポイントを接続します。

アクションの最初のステップは、ウェイポイントを無効にすることです (したがって、一度だけ起動します)。次に、ajax を介して追加のデータをロードし、それをページにレンダリングします。 （コールバックを介して）それが完了したら、ウェイポイントを再度アクティブにして、ユーザーがスクロールダウンしたときにプロセスが新たに開始されるようにします。

アプリケーションは、読み込まれた要素の数と要素を追跡する必要があるため、ajax リクエストは正しい数字をリクエストします (つまり、10 が読み込まれるため、次のリクエストは 10 で開始して 10 をフェッチし、次のリクエストは 20 で開始して 10 をフェッチする必要があります)。など）。

「最下部までの 75%」は、ウェイポイントで簡単に設定できます。そのために「オフセット」を使用します。

ウェイポイントのドキュメントを確認してください

無限スクロールをトリガーする DOM 要素をメイン グリッドの下に配置して、さらにコンテンツを読み込むと自動的に押し下げます。

于 2012-05-23T17:18:37.450 に答える
1

jquery masonry+waypoint js を使用しました。しかし、masonry コールバックにウェイポイントを登録しないと、ajax 呼び出しに付属するアイテムが複数回読み込まれます。これが私の解決策です。

//INFINITE SCROLL
    var $loading = $("#itemsloading"),
    $footer = $('footer'),
    opts = {
        offset: '120%',
        onlyOnScroll:false
    };

    $footer.waypoint(function(event, direction) {
        $footer.waypoint('remove');
            $loading.toggle(true);
            $.get($('.more').attr('href'), function(data) {
                var $data = $(data.result[0]);  
                if($(data.result[0]).length==0){
                    $loading.toggle(false);
                    return false;
                }
                $('#items').append( $data ).masonry( 'appended', $data, true, 
                        function(){
                            $footer.waypoint(opts);
                            });
                $loading.toggle(false);
            }); 
    }, opts);
于 2012-11-07T20:42:05.610 に答える