jQuery
Как остановить бесконечную прокрутку
Добрый день, прикрутил этот плагин https://www.jqueryscript.net/demo/infinite-scroll-pagination/ , всё чудесно, но, прошу совета, как можно остановить прокрутку, чтобы записи по несколько раз не дублировались, а загрузились только те, которые есть в массиве json файла ?
Для остановки бесконечной прокрутки можно использовать опцию doneLoadingMsg плагина infinite-scroll-pagination. Эта опция позволяет отобразить сообщение, когда все данные были загружены.
Чтобы остановить прокрутку, когда все данные загружены, нужно добавить опцию doneLoadingMsg и задать ей сообщение. Например:
Теперь, когда все данные будут загружены, плагин отобразит сообщение "Все данные загружены" и прокрутка остановится.
Также, чтобы избежать дублирования записей, можно использовать опцию appendCallback, которая позволяет контролировать процесс добавления новых элементов на страницу. Например, можно проверять, что новые элементы не дублируют уже имеющиеся на странице:
В этом примере мы добавляем новые элементы только в том случае, если они не дублируют уже имеющиеся на странице. Для этого мы проверяем атрибут data-id новых элементов и сравниваем его со значениями уже имеющихся элементов. Если атрибут data-id совпадает, значит элемент уже есть на странице, и мы его не добавляем.
Чтобы остановить прокрутку, когда все данные загружены, нужно добавить опцию 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 совпадает, значит элемент уже есть на странице, и мы его не добавляем.
Похожие вопросы
- Плавная прокрутка к элементу страницы на jquery
- Программная прокрутка div - последний штрих
- Как убрать горизонтальную прокрутку?
- Как сделать скриншот экрана с прокруткой
- Проблема с колесом мыши((( Вместо прокрутки страниц регулирует громкость системного звука))))
- Подскажите казино в котором есть рулетка с возможностью прокрутки
- Здравствуйте. Вопрос по поводу кредитных кооперативов. Хочу вложить туда деньги на прокрутку.
- Не работает прокрутка страницы в Chrome.
- Как лучше всего сделать прокрутку?
- Убрать скролл без удаления полосы прокрутки