waypoint.jsで無限スクロールするには？

Question

ここでは何が起こっているのですか？私は "home.html"と呼ばれるHTML文書を持っています。それは多くのdivを含み、これらのdivのそれぞれは単一の投稿です。私もindex.htmlを持っていて、そこにdiv #contentがあります。コンテンツはindex.htmlでは空ですが、home.htmlのdivで.load（）を呼び出すといっぱいになります。また、.load呼び出しでdiv：nth-​​child（-n + 10）を使用すると、最初の10個の投稿のみを読み込むことができます。 waypoint.jsを使ってこれに無限のスクロールを追加するにはどうすればよいですか？つまり、スクロールバーが一番下まで75％に達すると、home.htmlから次の10個のdivが読み込まれます。

Answer 1

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

アクションの最初のステップは、ウェイポイントにディセーブルにすることです（1回だけ発生するため）。それから、ajax経由で追加のデータをロードして、それをページにレンダリングします。 （コールバック経由）の処理が完了すると、ウェイポイントを再アクティブにして、ユーザーがスクロールしたときにプロセスが新たに開始されるようにします。

あなたのアプリケーションはロードされる要素の数を追跡する必要があります。つまり、あなたのajax要求が正しい数を要求します（つまり、10がロードされるので、次の要求は10で始まり、10をフェッチする必要があります。 20、フェッチ10など）。

「地面の75％」はウェイポイントで簡単に設定できます。そのために "オフセット"を使用します。

waypoint documentation

をチェックアウト、私はより多くのコンテンツをロードすると、それが自動的にそれを押し下げるので、私は、私が持っているメイングリッドの下に私の無限スクロールをトリガーするDOM要素を入れました。

Answer 2

私はjquery masonry + waypoint jsを使用しました。しかし、もしあなたがmasonry callbackにwaypointを登録しないと、あなたの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);