如何無限滾動waypoint.js？

所以這裏是發生了什麼事情。我有一個名爲「home.html」的html文檔。它包含很多div，每個div都是一個單獨的帖子。我也有一個index.html，並在其中有一個div＃內容。 index.html中的內容是空的，但它通過.load（）調用被home.html中的div填充。另外，在.load調用中使用div：nth-child（-n + 10）我可以只加載前10個帖子。我如何使用waypoint.js爲此添加無限滾動？因此，一旦滾動條達到底部的75％，它會從home.html加載下一個10個div。如何無限滾動waypoint.js？

來源

2012-05-05 Wilfred

您應該說「從底部開始10個元素」而不是「75％」，因爲頁面增長的時間越長，從服務器請求元素的頻率越高。它應該保持不變。 – Bergi

加載頁面上的10個元素後，連接一個jQuery的航點，將觸發一個動作。

該行動的第一步將禁用到航點（所以它只會觸發一次）。然後讓它通過ajax加載額外的數據並在頁面上渲染。經過（通過回調）完成後，您將重新激活航點，以便在用戶向下滾動時啓動新的航點。

您的應用程序將不得不跟蹤加載了多少元素以及哪些元素，因此您的ajax請求請求正確的數字（即10個已加載，所以下一個請求應該從10開始並獲取10，接下來應該從20和取10等）。

「通往底部的75％的路」很容易在航點配置。你會使用「偏移」。

時退房waypoint documentation

我把一個觸發我有，所以我加載更多的內容，它會自動把它推主網架的下面我無限滾動的DOM元素。

來源

2012-05-23 17:18:37

我使用jquery masonry + waypoint js ..但是如果你不在masonry回調中註冊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);

來源

2012-11-07 20:42:05 wholalotta

如何無限滾動waypoint.js？

回答

相關問題