0

無限スクロールを実装したいサイトに取り組んでいます。IAS プラグインを見つけましたが、1 つのインスタンスを除いてうまく機能します。jQuery .load() 関数を使用して新しいコンテンツを div にロードすると、無限スクロールが機能しなくなります。

<script type="text/javascript">

  $(document).ready(function() {

    var ias = $.ias({
      container:    '#load_here',
      item:       'p',
      pagination: '#nav',
      next:       '#nav a'
    });

    $("#reload").click(function(){
      event.preventDefault();

      $("#test").load( "page0.html #load_here", function() {

        // Reinitialize the infinite scrolling here.

      });
    });
  });

</script>

IAS プラグインのドキュメントは次のとおりです: http://infiniteajaxscroll.com/docs/overview.html

関連すると思われる次の質問を見つけましたが、明確な答えがないように思われます.リンクではないことをお詫びします.スタックオーバーフローでは、2つ以上のリンクを投稿できません.

  1. stackoverflow.com/questions/24419462/

  2. stackoverflow.com/questions/25205507/

  3. stackoverflow.com/questions/20404493/

  4. github.com/webcreate/infinite-ajax-scroll/issues/68

それは破棄機能について語っていますが、私の試みでは、まったく何もしないように見える解決策を見つけようとしています。私は非常に愛好家のプログラマーです。これを正しく実装するために必要な構造や構文を単に理解していないのではないかと心配しています。

ここにテストページがあります

無限スクロールは、ページ 1、2、および 3 を正常にロードします。上部のリンクをクリックして jQuery .load() を使用してページ 0 をロードすると、無限スクロールが機能しなくなります。下にスクロールして、ページ 1、2、および 3 を再度ロードする必要があります。

ありがとうございました。

4

1 に答える 1

1

これが発生する理由については 100% 確信が持てませんが、コードを実行すると、$("#test").load(...ias が使用するスクロール イベント ハンドラが起動しなくなっていることがわかります。

解決策は、ロードが完了したら、無限スクロールを再初期化することです。

$("#test").load( "page0.html #load_here", function() {

  // Reinitialize the infinite scrolling here.
  var ias = $.ias({
    container:  '#load_here',
    item:       'p',
    pagination: '#nav',
    next:       '#nav a'
  });

});

ただし、$.ias()このメソッドをメモ化し、「ias」キーを使用してデータをグローバル ウィンドウ オブジェクトに割り当てることにより、冪等になろうとするため、これは機能しません。

文書化されていませんが、ias の作成者がこれを修正するための抜け穴を提供しているようです。"destroy"文字列を渡して$.ias()メモ化されたデータを削除すると、再度呼び出してスクロール リスナーを再インストールできます。( https://github.com/webcreate/infinite-ajax-scroll/blob/master/src/jquery-ias.js#L553 )

期待どおりの結果のコードは次のとおりです。

変化します。

function setupIAS() {
  ias && $.ias('destroy');
  ias = $.ias({
    container:    '#load_here',
    item:       'p',
    pagination: '#nav',
    next:       '#nav a'
  });
}

$(document).ready(function() {

  setupIAS();

  $("#reload").click(function(){
    event.preventDefault();

    $("#test").load( "page0.html #load_here", function() {

      // Reinitialize the infinite scrolling here.
      setupIAS();

    });
  });
});
于 2014-09-17T20:00:20.997 に答える