Có plugin cuộn vô hạn nào có nút tải thêm không?

Question

Hi có ai biết nơi tôi có thể nhận được plugin cuộn vô hạn có một nút bạn bấm trước khi nó tải trong bài viết nhiều hơn?

đây là những gì im tìm kiếm (nhìn vào nút ở góc dưới bên phải)

Answer 1

Từ documentation page jQuery vô hạn Plugin cuộn:

Trong 1,4 bạn có thể kích hoạt tải trang tiếp theo của nội dung theo số . Trước tiên, bạn sẽ hủy liên kết hành vi mặc định. Và sau đó kích hoạt các kéo tiếp theo bất cứ khi nào bạn muốn.

// 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'); 

Nó sẽ giải quyết vấn đề của bạn.

Answer 2

Về cơ bản bạn thân nên có tràn css : di chuyển và nút hơn nên nối thêm html hơn đối với bạn chứa Div sử dụng jquery append - http://api.jquery.com/append/

Answer 3

Nếu bạn đang tìm kiếm một cuộn vô hạn, đó là một chuyện, nhưng chỉ cần nút Khác không yêu cầu plugin.

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'); 
}); 

Chức năng .load sẽ thực hiện cuộc gọi AJAX đến URL được cung cấp và chọn tùy chọn sẽ chỉ cần kéo ra rằng mục phù hợp cụ thể. Trong trường hợp này, nếu tham số trang cho trang hiển thị của bạn điều khiển độ lệch cho truy vấn để kéo các mục bạn muốn sau đó, tải URL sẽ nối thêm bộ mục tiếp theo mỗi khi được gọi.

Tất nhiên bạn có thể tạo một trang AJAX duy nhất chỉ trả về các đoạn HTML cho tập hợp các mục tiếp theo nhưng nó có liên quan nhiều hơn một chút tùy thuộc vào kiến ​​trúc của bạn. Bạn sẽ tiết kiệm băng thông/thời gian thực hiện bằng cách thực hiện nó, tuy nhiên.

Answer 4

Với phiên bản hiện tại của Infinite Scroll Plugin (2.1.0), bạn có thể tạm dừng khi các thành phần được tải, sau đó tiếp tục và kiểm tra xem nội dung mới có được tải lên một lần nhấp hay không (nút khác):

$('.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') 
} 

và sau đó

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