は、blogspotの9gagのようにスクロールすると自動的に古い投稿を読み込みます。

Question

これは私のブログです：http://9gago.blogspot.com/これは、bloggger/blogspotから作られたブログです。この機能を使用すると、古い投稿が読み込まれます。それがページの最後の投稿に達するたびに古い投稿をクリックします。ここにはちょうどそのhttp://9gag.com/をするか、それを持っていたサイトがあります。

Answer 1

あなたが好きかもしれない実装が1つあります。これを行うにはいくつかの方法があります。

まず、グリッドに表示するデータのキーをどこかに格納する必要があります。これは本質的にシーケンシャルなキーを持っていることを前提としています。自動インクリメント整数が機能します。

あなたのグリッドのマークアップは次のようになります。

<div class="content" id="7">some stuff</div> 
<div class="content" id="8">another row of stuff</div> 
<div class="content" id="9">another row of stuff</div> 

は、その後、あなたはまた、データの次のバッチをつかむだろう「ロード」のアイコンを表示する機能を必要としています。グリッドの最後の要素のIDを使用して、次の20行（または多くの場合でも必要な）のデータ行を取得するクエリをサーバー側で実行します。

function lastRow() 
{ 
    $('div#lastRowLoader').html('<img src="spinner.gif"/>'); 
    $.post('dataUrl?action=getNextRows&lastId=' + $('.content:last').attr('id'), 
     function(data){ 
      if (data != '') { 
      $('.content:last').after(data);   
      } 
      $('div#lastRowLoader').empty(); 
     }); 
    }; 

最後に、ユーザーを検出する最後の機能がページの最後までスクロールしました。

$(window).scroll(function(){ 
    if ($(window).scrollTop() == $(document).height() - $(window).height()){ 
     lastRow(); 
    } 
}); 

明らかに、DOMを介してページにデータを読み込むために投稿が返すものを取るコードが必要です。私はこのコードを書いて、何が起こる必要があるのか​​を概念的に示しています。あなたのマークアップは異なっていて、あなたのグリッドはSencha Ext JSからハンドロールされたものまで何でもかまいません。

うまくいけば、これはあなたのために車輪を得るために十分です。