Существует ли плагин с бесконечной прокруткой и кнопкой «Загрузить еще»?

Question

Привет, кто-нибудь знает, где я могу получить плагин для бесконечной прокрутки, в котором есть кнопка, которую вы нажимаете, прежде чем загружать другие посты?

вот что я ищу (посмотрите на кнопку «больше» в правом нижнем углу)

Answer 1

Со страницы документации плагина бесконечной прокрутки jQuery:

В версии 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

В текущей версии Infinite Scroll Plugin (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>

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-адреса, а необязательный селектор просто вытянет этот конкретный соответствующий элемент.В этом случае, если параметр? Page на вашей отображаемой странице управляет смещением запроса, чтобы извлечь элементы, которые вы хотите, тогда. Загрузка URL будет добавлять следующий набор элементов при каждом его вызове.

КонечноВы можете создать уникальную страницу AJAX, которая просто возвращает фрагменты HTML для следующего набора элементов, но она немного сложнее в зависимости от вашей архитектуры.Тем не менее, вы сэкономите пропускную способность / время выполнения.

Answer 4

В основном ваше тело должно иметь переполнение css : scroll и кнопка more должна добавить больше html к вашему контейнеру Div с помощью jquery append - http://api.jquery.com/append/