Подгрузка контента с сервера при скролле?

Question

[Павел Чернов]

Здравствуйте! Подскажите, как на чистом JS сделать подгрузку картинок с сервера при скролле. Например, при загрузке страницы с сервера приходит 5 картинок, при скроле, нужно посылать запрос на сервер за новой партией картинок. Спасибо!

Comments

[Evgeniy]

А почему ajax не хотите использовать?

[Stalker_RED]

Edgark, а почему вы решили, что он не хочет ajax?

[y0u]

Ответ легко ищется поисковиком

[Evgeniy]

Stalker_RED, потому что он написал что хочет на чистом JS. Чтобы включить AJAX нужно подключить его, получается что AJAX это дополнение к чистому JS. Ну и отсюда если человек спрашивает про чистый JS он не планирует пользоваться AJAX.

[RAX7]

Edgark, https://developer.mozilla.org/ru/docs/Web/Guide/AJAX

[Evgeniy]

RAX7, если я сказал что-то неверно напишите. Я перешел по ссылке но там не написано что AJAX входит в JS по умолчанию.

[Stalker_RED]

Edgark, в браузерах по умолчанию есть hxr (лет 15 уже) и fetch (лет пять), ничего подключать не нужно.

[Evgeniy]

Stalker_RED, Спасибо что объяснили.

Answer 1

[Stalker_RED]

1. Вешаете IntersectionObserver или слушаете событие scroll для определения когда пора подгружать.

2. Используя xhr или fetch получаете с сервера новую порцию данных.

3. Если нужно - наполняете этими данными шаблоны.

4. Вставляете на страницу,

5. обновляете правила для пункта 1.

Comments

[Павел Чернов]

Благодарю!

Answer 2

[Владимир]

Здесь рабочий пример. Правда, использован PHP для доступа к БД, но всё это кастомизируется.

Comments

[Павел Чернов]

Благодарю!