0

こんにちは、無限ページの js コードがうまく機能していますが、何らかの理由で 2 ページ目でしかトリガーされません。自分のニーズを満たすために見つけたいくつかのコードにいくつかの変更を加えましたが、アイテムをロードし続ける代わりに、コンソール ログの状態として 2 ページ目で停止します。これが私のコードです。誰かがそれをチェックして、これがトリガーされない理由を教えてください。私のページネーションに関しては、私は will_paginate gem を使用しており、下部のページへのリンクを取得しているため、バック es は正常に機能しています。前もって感謝します。

編集 2: 誰かが私の問題に遭遇した場合、これが私の最終的なセットアップです。

- content_for :scripts do
  :javascript
    (function() {
      var divContainer = $('#posts-container');
      var page = 1,
          loading = false;
      var current_url = divContainer.data('url') + '?page=';

      function nearBottomOfPage() {
        return $(window).scrollTop() >= $(document).height() - $(window).height() - 10;
      }

      $(window).scroll(function(){
        if (loading) {
          return;
        }

        if(nearBottomOfPage()) {
          loading=true;
          page++;
          $.ajax({
            url: current_url + page,
            type: 'get',
            dataType: 'script',
            success: function(html) {
              var $items = $(html).find('.item');
              jQuery(".content").append($items).masonry( 'appended', $items, true );
              $(".content").masonry('reload');
            },
            error: function() {
              console.log("Error")
            },
            complete: function() {
              loading = false;
            }
          });
        }
      });
    }());

編集1：

nearBottomOfPage() 関数が正しく動作していないことがわかりました。初めてトリガーするだけで、再度 true を返すことはありません。なぜこれができるのですか？

4

1 に答える 1

2

私が気づいたことの1つは、「読み込み中」フラグをtrue次のように設定していることです。

if(nearBottomOfPage()) {
  loading=true;

に戻すことはありませんfalse。つまり、nearBottomOfPage()チェックは一度だけトリガーされます。

AJAX 成功ハンドラーを更新してリセットしてみてくださいloading。

success: function(html) {
  var $items = $(html).find('.item');
  $(".content").append($items).masonry( 'appended', $items, true );
  $(".content").masonry('reload');
  console.log("Reloaded masonry");
  loading = false; // <----------------------------- This is sort of important.
}

AJAX にもエラー ハンドラーを追加することをお勧めします。loading = false;次に、をcompleteコールバックに移動できます。

success: function(html) {
  // As you have it now...
},
error: function() {
  // Complain or something...
},
complete: function() {
  loading = false;
}
于 2012-06-16T19:01:52.420 に答える