jQuery

Как остановить бесконечную прокрутку

Добрый день, прикрутил этот плагин https://www.jqueryscript.net/demo/infinite-scroll-pagination/ , всё чудесно, но, прошу совета, как можно остановить прокрутку, чтобы записи по несколько раз не дублировались, а загрузились только те, которые есть в массиве json файла ?
Для остановки бесконечной прокрутки можно использовать опцию doneLoadingMsg плагина infinite-scroll-pagination. Эта опция позволяет отобразить сообщение, когда все данные были загружены.

Чтобы остановить прокрутку, когда все данные загружены, нужно добавить опцию doneLoadingMsg и задать ей сообщение. Например:
 $('#content').infiniteScrollPagination({ 
responseType: 'json',
paginationData: {page: 1},
maxPage: 5,
serverCall: function (callback) {
$.ajax({
url: 'data.php',
dataType: 'json',
data: {page: this.nextPage},
success: function (data) {
callback(data);
}
});
},
doneLoadingMsg: 'Все данные загружены'
});

Теперь, когда все данные будут загружены, плагин отобразит сообщение "Все данные загружены" и прокрутка остановится.

Также, чтобы избежать дублирования записей, можно использовать опцию appendCallback, которая позволяет контролировать процесс добавления новых элементов на страницу. Например, можно проверять, что новые элементы не дублируют уже имеющиеся на странице:


 $('#content').infiniteScrollPagination({ 
responseType: 'json',
paginationData: {page: 1},
maxPage: 5,
serverCall: function (callback) {
$.ajax({
url: 'data.php',
dataType: 'json',
data: {page: this.nextPage},
success: function (data) {
callback(data);
}
});
},
appendCallback: function (data, status, xhr) {
var $newItems = $(data.html);
var $existingItems = $('#content').find('.item');
$newItems = $newItems.not(function () {
var isNew = true;
var $this = $(this);
$existingItems.each(function () {
if ($this.data('id') === $(this).data('id')) {
isNew = false;
return false;
}
});
return !isNew;
});
$('#content').append($newItems);
},
doneLoadingMsg: 'Все данные загружены'
});

В этом примере мы добавляем новые элементы только в том случае, если они не дублируют уже имеющиеся на странице. Для этого мы проверяем атрибут data-id новых элементов и сравниваем его со значениями уже имеющихся элементов. Если атрибут data-id совпадает, значит элемент уже есть на странице, и мы его не добавляем.
Александр Захаров
Александр Захаров
1 490
Лучший ответ