VPF::Автоподгрузка контента при скроллинге, как в Инста

GRASSS

Дата 23.10.2018, 14:06 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 13
Регистрация: 2.11.2017

Репутация: нет
Всего: нет

Доброго времени суток господа. Значит есть галерея из 300 изображений, нужно чтобы на странице отображались первые 9, потом при скролле страницы подгружались следующие 9 и тд) пожалуйста подскажите, как можно реализовать подобное решение? Может набросок или демку?

ksnk

Дата 24.10.2018, 13:01 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

А в чем проблема ?
Садишься на window.onscroll
в функции вычисляешь - виден ли на экране хвостик галереи. если виден - посылаешь команду на сервер - "дай мне еще 9 порций" и вставляешь все это в нужное место. Чтобы не парить сервер очень часто - после отсылки запроса останавливаешь обработку onscroll

Для вычисления границ элемента есть уникальный метод getBoundingClientRect

Код


DOMRect {x: 12, y: -370, width: 1249, height: 850, top: -370, …}
bottom: 480
height: 850
left: 12
right: 1261
top: -370
width: 1249
x: 12
y: -370
__proto__: DOMRect

Для такого результатта получится что начиная от верха окна 850-370 = 480 нижних пикселей элемента попадают в область видимости. Осталось только вычислить границы окна броузера. Возможно помогут window.innerHeight - window.innerWidth, хотя тут я не уверен - давно не пользовался...

Это сообщение отредактировал(а) ksnk - 24.10.2018, 13:30

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »