Суть реализации автоподгрузки материала при прокрутке страницы

@AlxBtrd · Регистрация: 14.08.2014

Студворк — интернет-сервис помощи студентам

Захотелось реализовать подгрузку новостей при прокручивании страницы, когда остаётся пикселей 100 до конца страницы, хочу подгружать следующую страницу материалов, но никак не могу представить себе механизм работы.

Объясните принцип работы такой штуки.

Я сейчас представляю это так:
- При скролле {Если меньше n пикселей до конца страницы - вызывается функция подгрузки контента}
Функция скролла
- Если переменной scrollPageNum нет, значит это первая страница, значит устанавливаем scrollPageNum=1! Если есть, значит мы уже прокрутили до определённой страницы и ничего не делаем.
- scrollPageNum + 1 //Мы же подгружаем следующую страницу
- Отправляем на сервер номер страницы (1/2/69)
- На сервере вычисляем, существует ли такая страница, если да - формируем и отправляем её содержимое
- Если ответ получен - добавляем в конец блока с новостями то что получили.

Я правильно представляю принцип работы? Если нет, то объясните как это должно работать.
В моём варианте меня к примеру смущает то, что если во время моего чтения кто-то добавит новый материал (и он сдвинет колличество страниц), а я прокручу страницу вниз - я получу ещё раз содержимое последней страницы.
Так же мне кажется что хранить переменную с количеством страниц немного странно.

@LeniumSoft · 27.04.2016, 14:55

Сообщение от AlexBitard

Объясните принцип работы такой штуки.

У меня была подобная задачка! Скину скрипт, может поможет.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script type="text/javascript">
        $(document).ready(function () {
            
            $(window).scroll(function() {
 
                /* Если высота окна + высота прокрутки больше или равны высоте всего документа и ajax-запрос в настоящий момент не выполняется, то запускаем ajax-запрос */
                if ($(window).scrollTop() + $(window).height() >= $(document).height() - 200 && !inProgress) {
                    load10Entries();
                }
            });
 
            load10Entries();
        });
 
        var counter = 0;
 
        var inProgress = false;
 
        var url = '@Url.Action("Load10Entries")';
 
        function load10Entries() {
            inProgress = true;
 
            var data = new Object();
            data.offset = counter;
 
            $.post(url, data, function(response) {
                $("#historyList").append(response);
 
                inProgress = false;
            });
 
            counter += 10;
        }
    </script>

$("#historyList") это ul

запрос возвращает 10 li.

На сервере у меня не страницы, просто коллекция элементов.
И переменной data.offset = counter; я просто пропускаю первые элементы и возвращаю следующие 10

Код работает идеально(без глюков)

@AlxBtrd · 27.04.2016, 15:05 **[ТС]**

LeniumSoft, А если на сервере у вас добавится новый элемент?
Тогда вы получите ещё раз элемент который уже есть на странице.
Попробуйте это сделать.

Добавлено через 5 минут
LeniumSoft, сейчас думаю о том что можно читать id последнего материала и пытаться подгрузить посты с меньшим id. Так, неважно добавился или удалился материал, если более старых материалов нет - ничего подгружено не будет. Если же есть, то будут подгружены действительно более старые материалы.

Но всё же прошу кого-нибудь сказать правильный ли алгоритм я представляю и если нет, объяснить как это должно работать правильно.

@LeniumSoft · 27.04.2016, 15:35

Сообщение от AlexBitard

А если на сервере у вас добавится новый элемент?
Тогда вы получите ещё раз элемент который уже есть на странице.

Я скрипт скинул для примера!
У меня там нет страниц. Элементы добавляются в конец. Поэтому и проблем с отображением нет.
Вам то видимо надо это под страничную навигацию делать.

@AlxBtrd · 27.04.2016, 18:27 **[ТС]**

LeniumSoft, Нет. Просто добавьте в начало новый элемент и вы поймёте о чём я.

Скажем у вас 100 элементов.
Вы выводите по 10.
Вы вывели 10 "страниц".
Добавили в начало 101й элемент.
Прокрутили, скрипт нашёл 101й элемент, это элемент №1
В итоге у вас получилось (по id)
100
99
98
...
3
2
1
1

Новые блоги и статьи Все статьи Все блоги /
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .

@AlxBtrd -13 / 2 / 0 Регистрация: 14.08.2014 Сообщений: 240

	Суть реализации автоподгрузки материала при прокрутке страницы 27.04.2016, 13:49. Показов 2508. Ответов 4 Метки нет (Все метки) Захотелось реализовать подгрузку новостей при прокручивании страницы, когда остаётся пикселей 100 до конца страницы, хочу подгружать следующую страницу материалов, но никак не могу представить себе механизм работы. Объясните принцип работы такой штуки. Я сейчас представляю это так: - При скролле {Если меньше n пикселей до конца страницы - вызывается функция подгрузки контента} Функция скролла - Если переменной scrollPageNum нет, значит это первая страница, значит устанавливаем scrollPageNum=1! Если есть, значит мы уже прокрутили до определённой страницы и ничего не делаем. - scrollPageNum + 1 //Мы же подгружаем следующую страницу - Отправляем на сервер номер страницы (1/2/69) - На сервере вычисляем, существует ли такая страница, если да - формируем и отправляем её содержимое - Если ответ получен - добавляем в конец блока с новостями то что получили. Я правильно представляю принцип работы? Если нет, то объясните как это должно работать. В моём варианте меня к примеру смущает то, что если во время моего чтения кто-то добавит новый материал (и он сдвинет колличество страниц), а я прокручу страницу вниз - я получу ещё раз содержимое последней страницы. Так же мне кажется что хранить переменную с количеством страниц немного странно. 0

@AlxBtrd -13 / 2 / 0 Регистрация: 14.08.2014 Сообщений: 240
	27.04.2016, 15:05 [ТС]
	LeniumSoft, А если на сервере у вас добавится новый элемент? Тогда вы получите ещё раз элемент который уже есть на странице. Попробуйте это сделать. Добавлено через 5 минут LeniumSoft, сейчас думаю о том что можно читать id последнего материала и пытаться подгрузить посты с меньшим id. Так, неважно добавился или удалился материал, если более старых материалов нет - ничего подгружено не будет. Если же есть, то будут подгружены действительно более старые материалы. Но всё же прошу кого-нибудь сказать правильный ли алгоритм я представляю и если нет, объяснить как это должно работать правильно. 0

@AlxBtrd -13 / 2 / 0 Регистрация: 14.08.2014 Сообщений: 240
	27.04.2016, 18:27 [ТС]
	LeniumSoft, Нет. Просто добавьте в начало новый элемент и вы поймёте о чём я. Скажем у вас 100 элементов. Вы выводите по 10. Вы вывели 10 "страниц". Добавили в начало 101й элемент. Прокрутили, скрипт нашёл 101й элемент, это элемент №1 В итоге у вас получилось (по id) 100 99 98 ... 3 2 1 1 0