[Melcma]

#programowanie #webdev

Robie one page infinite scrollera, lazyloadowane obrazki przy scrollowaniu w dol
Teraz nie wiem jak api ogarnac

Powiedzmy, ze backend bierze ma folder z 1000 obrazkami, wystawia JSONa z pod /all z wielkim JSONem z 1000 wpisami

[
{id: 1, title: mountain, file: mountain-2.jpg size: 100kb, tags: nature,mountain,sky},
{...},
{...}
]

cos takiego powiedzmy, array obiektow

i co teraz na frontendzie zrobic, sciagnac calego JSONa z 1000 wpisami i na frontedzie ogarnac logike ktory obrazek ma sie kiedy wczytac?

a co jakbym mial np 35000 obrazkow, nie wydaje mi sie zeby odbieranie jsona z 35k wpisami bylo wydajne wtedy

no niby moge zrobic tak, ze w backendzie zrobie endpointy, np /1 i wtedy backend da mi JSONa z 40 obrazkami od 1 do 40, potem /2 da od 41 do 80 itd i sobie bede dynamicznie robil zapytania do API ale tutaj kolejny problem jest, ze API w backendzie bedzie generowane dynamicznie, w zaleznosci od tego jak obrazki sie skompresowaly, i np o godzinie 20:00 najnowszych 20 obrazkow bedzie inne niz najnowsze obrazki z 20:10 bo backendowy proces przetrwail juz ich kompresje i resize

[z.....4]

@Melcma: nie, jak zjedzie na koniec strony to niech bierze twoje/api/page=2&limit=20 i dodaje do tej tablicy obiektów

[xetrov]

@Melcma: po co nieszczęsny infinite scroll skoro chcesz ładować wszystko? ( ͡° ͜ʖ ͡°) Paginacja (ale nie to opisane coś ją przypominające ( ͡° ͜ʖ ͡°) ) i ewentualny cache.

[Melcma]

@xetrov: chcialem zrobic cos takiego: https://scrolller.com/art

z tym, ze z naciskiem na tapety spod /wallpaper i /wallpapers i troche funkcjonalnosci do tego
nad paginacja pomysle

[Melcma]

@zielonk4: no dobra ale jak od strony backendu to ma byc wystawiane

powiedzmy ze mam 100 obrazkow, 1 to najnowszy, 100 to najstarszy

api/page=1&limit=20 wystawia arraya z 20 obrazkami, od 1 do 20
api/page=2&limit=20 wystawia obrazki od 21

[xetrov]

@Melcma: wiem co chcesz zrobić, tylko tego się nie robi (dobrze) w sposób który opisałeś. Przemyśl jeszcze czy istotny jest dla Ciebie aktualny stan czy odniesienie do podanych parametrów - liczba obrazków w czasie będzie się zmieniać z tego co napisałeś a zapewne nie chcesz doładowywać ponownie tych samych.

[z.....4]

@Melcma: dokładnie tak

[Melcma]

@xetrov: no wlasnie, tak jest na wykopie, ze jestes na stronie 1, klikasz na strone 2 i widzisz ten sam post ze strony 1, bo sie przesunal zanim doczytales do konca

w mojej apce bedzie o wiele bardziej dynamicznie, nie wiem jak to ogarnac, albo musialbym w jakis sposob filtrowac ktore obrazki sie juz wyswietlily albo jakis jednodniowy cache robic xD albo bedzie tak jak na 4chanie, ze klikasz kolejne

[xetrov]

@Melcma: a nie prościej po prostu paginacja po np. id (o ile normalne, inkrementowane a nie jakieś hipstawynalazki ( ͡° ͜ʖ ͡°)) czy czymkolwiek innym stałym dla rekordu w bazie? Z tego co opisujesz wazniejsze jest uniknięcie wczytywania duplikatów niż możliwość przeskoczenia do n-tej strony, choć da się zrobić oczywiście jedno i drugie razem. Popatrz np. tutaj https://coderwall.com/p/lkcaag/pagination-you-re-probably-doing-it-wrong

[Melcma]

@xetrov: no dobra, ale wtedy tak

jak backend pod endpointem /api/1 odda mi pierwszy obrazek, no to jakos bede musial wiedziec jaki jest ostatni, np 836, moge sobie to trzymac pod jeszcze innym endpointem i np bedzie liczyc od 836 w dol, wydaje sie spoko, cos moze pojsc nie tak?

wtedy np po refreshu backend mowi ze najnowsze api to juz jest teraz 850, i pokazuje na gorze 14 wiecej

[xetrov]

@Melcma: totala możesz zwracać w wyniku jeśli jest potrzebny, tu masz nawet lepiej opisane https://developers.facebook.com/docs/graph-api/using-graph-api (cursor pagination i niżej).