1

Вопрос больше концептуальный, но и про технику тоже будет :)

У меня на сайте отображается очень большое кол-во «карточек» — изображений и информации под ними (1000+ штук).

Сортировки, фильтрации, поиск — всё есть.

Вопрос в том, как лучше в 21 веке формировать эту информацию:

1) разбить на страницы, на каждой из которых будет подгружаться небольшое кол-во «карточек»;

2) «подгружать постепенно «карточки», при мотании скроллинга в браузере.

Думаю, что п.2) лучше всего подойдёт для такой задачи. Что скажете?

Вопрос — в этом случае как лучше реализовывать? Отслеживать перемещение скроллинга до упора и после этого создавать новые элементы в конце страницы? Но хотелось бы немного работать на опережение, чтобы пользователь не замечал явно подгрузки.


UPD на основе ответов:

Во-вторых, вам придется как-то решать очень крупную проблему: как при смене сортировки или фильтров пересортировать уже показанные карточки при подгрузке новых, которые должны после показа попасть куда-нибудь в середину уже имеющихся.

Тут думал просто удалять объекты в DOM и создавать новые — на нескольких сотнях карточках это происходит мгновенно (не заметно для глаза), так что тут проблема может возникнуть, только когда карточек будут тысячи и тогда надо смотреть в сторону оптимизации (удалять только то, что нужно, создавать только то, что нужно)

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

Вот тут конечно вопрос надо изучить — насколько будет падение в скорости. Наверное это даже больше вопрос к браузерам — умение не тратить ресурсы на неотображаемые элементы.

В-четвертых, вы лишаете себя возможности задать пермалинк на нужную страницу (нужные N карточек).

Во-первых, при сортировке или фильтрации порядок будет разный, поэтому в пермалинке придётся указывать и эти параметры, а учитывая, что список карточек со временем будет пополняться, то даже такой пермалинк будет неэффективен

Во-вторых, ссылку на нужную карточку можно задавать через ее уникальный ID, типа такого:

site.php?articles=1,5,7,11

2 ответа 2

1

Вопрос - в этом случае как лучше реализовывать? Отслеживать перемещение скроллинга до упора и после этого создавать новые элементы в конце страницы? Но хотелось бы немного работать на опережение, чтобы пользователь не замечал явно подгрузки.

Можно отслеживать размеры скроллируемой области (фактически - положение последней карточки) и делать подгрузку карточек когда юзер проскроллит, например, на 90%. Или когда, скажем, третья с конца карточка попадает в отображаемую область.

НО:

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

Во-вторых, вам придется как-то решать очень крупную проблему: как при смене сортировки или фильтров пересортировать уже показанные карточки при подгрузке новых, которые должны после показа попасть куда-нибудь в середину уже имеющихся.

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

В-четвертых, вы лишаете себя возможности задать пермалинк на нужную страницу (нужные N карточек). А пользователя, соответственно, лишаете этой возможностью пользоваться. Необоснованное очень уважительными причинами лишение пользователя пермалинков карается в аду варкой в котле с фекалиями.

Подгрузка по мере скроллинга годится только для одной ситуации: когда а) к уже просмотренному возвращаться не требуется, б) сортировка - одна, заданная на сервере и в) пермалинки на "проскроленное вот до этого места" не нужны. То есть, для чтения всякой хрени вконтактике.

1
  • У Zhihar возникли дополнительные вопросы к вашему ответу; см. UPD в теле вопроса. 30 мая 2018 в 10:14
0

Тут думал просто удалять объекты в DOM и создавать новые - на нескольких сотнях карточках это происходит мгновенно (не заметно для глаза)

Нужно думать и о тех пользователях, которые будут видеть ваши карточки не с мощных многоядерных игровых компов, а с тонких клиентов, нетбуков и планшетов и большинства смартфонов. Вот там они наплачутся, любуясь лагами и спиннером.

Во-первых, при сортировке или фильтрации порядок будет разный, поэтому в пермалинке придётся указывать и эти параметры, а учитывая, что список карточек со временем будет пополняться, то даже такой пермалинк будет неэффективен

Не суть важно. Тут принцип как при чтении большой темы на форуме - человек может, например, пролистать десяток страниц, сделать закладку (или даже просто закрыть браузер), уйти по делам, через час вернуться и продолжить с того же места, открыв закладку или восстановив сессию браузера. Или даже просто случайно уйти со страницы и, спохватившись, вернуться назад. Пейджер спасет ему время и нервы. Сплошной поток карточек с подгрузкой этой возможности не даст.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.