[React Redux] Efektywne ładowanie dużej ilości małych obrazków.

Question

Może ktoś tutaj będzie miał pomysł na efektywne ładowanie dużej ilości obrazków.

Przedstawienie problemu:

Piszę sobie aplikacje w reakcie używając reduxa. Leci zapytanie do serwera o liste wyników.
Problemem jest fakt, że potrzebuje wczytać na ten moment około 336 obrazków z tej listy po 10~20kb każdy.

Jednym z pomysłów było dodanie loading bara, ale nie wiem, na ile to jest user-friendly i czy są jakieś lepsze rozwiązania.

przykładowe działanie aplikacji: https://drive.google.com/file/d/0B_m8fC4d_bzNcGNqZWR4R2llcE0/view

Answer 1

Po burzy mózgów na IRC doszliśmy do wniosku, że najszybciej będzie ładować 1x sprite ze wszystkimi obrazkami.

Taki sprite waży około 2mb i jest to tylko jeden request.

Problemem będzie jedynie implementacja tego po stronie serwera api. Trzeba dodać skrypt tworzący takiego sprite + stylesheet z mapą. Skrypt będzie się odpalał tylko przy tworzeniu/usuwaniu/aktualizacji, więc serwer nie będzie zbytnio obciążony. Na pewno mniej, niż aktualnie.

Comments

I tak się będę upierał, że powinno to być zrobione na HTTP/2 + server push - jeśli istnieje taka możliwość.

---

w połowie zrobiłem ;d

Answer 2

Czy wszystkie są odrazu widoczne dla usera? Props, za muzykę. :p

Comments

Tak. Defaultowo "stan" filtra jest ustawiony na all, czyli że ma pokazywać wszystko.

Answer 3

Na gicie fejsbuka jest przykład z fixed-data-table i endless scrolling. Wydaje mi się jednak, że lepszym rozwiązaniem będzie wysyłanie ich z serwera paczkami po x elementów niż ładowanie na raz 50MB do frontu.

Comments

Inną z opcji było ładowanie samego obrazka (lub podmiana z transparent base64) wtedy, gdy element pokaże się na ekranie, przy użyciu:

https://github.com/joshwnj/react-visibility-sensor