0

嗨,大家好我有我無盡的頁面js代碼工作很好,但由於某種原因,它只觸發第二頁。我對我發現的一些代碼進行了一些更改以滿足我的需求,但是現在不再繼續加載它在第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。爲什麼會這樣呢?

回答

2

有一兩件事我注意到的是,你設置你的「加載」標誌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; 
} 
+0

非常感謝!這件小事做得很好:)我感謝你的幫助。週末愉快。 –