Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Автоподгрузка контента при скроллинге, как в Инста

Автор: GRASSS 23.10.2018, 14:06

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

Автор: ksnk 24.10.2018, 13:01

А в чем проблема ?
Садишься на 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, хотя тут я не уверен - давно не пользовался...