有沒有一個無限的滾動插件與加載更多的按鈕？

Question

嗨有沒有人知道我可以得到無限滾動插件，它有一個按鈕，您可以在它加載更多的帖子之前點擊？

這裏是什麼即時尋找（看看右下角的更多按鈕）

Answer 1

從jQuery的無限滾動的插件的documentation page：

在1.4就可以觸發加載下一頁的內容 將。您將首先解除默認行爲。然後隨時觸發 下拉。

// unbind normal behavior. needs to occur after normal infinite scroll setup. 
$(window).unbind('.infscr'); 
// call this whenever you want to retrieve the next page of content 
// likely this would go in a click handler of some sort 
$(document).trigger('retrieve.infscr'); 

應該解決您的問題。

Answer 2

基本上，你的身體應該有CSS 溢出：滾動和更多的按鈕應該更多的HTML追加到您div容器使用jQuery的append - http://api.jquery.com/append/

Answer 3

如果你正在尋找一個無限滾動，這是一兩件事，但只是一個更多按鈕不應該需要一個插件。

HTML

<div id="items"> 
    <!-- Run your query using the page parameter to offset items, then display the items here --> 
</div> 
<button id="more">More</button> 

JS

var page = 0; 
$('#more').click(function(){ 
    page++; 
    $('<div/>').appendTo('#items').load('the/same/url/?page='+page+' #items'); 
}); 

的.load功能將使一個AJAX調用提供的URL和可選的選擇將直接拔掉特定匹配的項目。在這種情況下，如果顯示頁面的？頁面參數控制查詢的偏移量以拉取所需的項目，那麼加載URL時會在每次調用時附加下一組項目。

當然，您可以製作一個獨一無二的AJAX頁面，該頁面只返回下一組項目的HTML片段，但根據您的體系結構，它會涉及更多一點。但是，您將通過這樣做來節省帶寬/執行時間。

Answer 4

隨着當前版本的無限滾動的插件（2.1.0），你可以暫停，當元件裝入，然後再重新開始，並檢查是否有新的內容應該點擊一個按鈕（或其他任何東西）被加載：

$('.container').infinitescroll({ 
     // infinite scroll options 
    }, 
    function(){ 
     // pause when new elements are loaded 
     $('.container').infinitescroll('pause') 
    } 
); 

function resume_infinite_scroll(){ 
    // resume 
    $('.container').infinitescroll('resume') 
    // check if new elements should be loaded 
    $('.container').infinitescroll('scroll') 
} 

然後

<button onclick="resume_infinite_scroll()">load more</button>