Как организовать просмотр тысяч фотографий, например, как АйФото или Гугл-фото?

Question

[kbc590]

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

То есть должно получится что-то вроде АйФото или Гугл-фото.

Пока сходу даже не получается подобрать правильный запрос для поиска похожих решений.

Буду рад совету, поисковому запросу. Почему-то кажется что задача не уникальная и явно должно быть какое-то решение от которого можно оттолкнуться.

Answer 1

[Тарас Шульга]

Согласен задача просто анриал - уровень гугла/яндекса. А если серьезно, просто выводим первые 30-50 фоток дальше просто по скролу догружаем еще через ajax + lazу load и все

Comments

[kbc590]

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

[tukreb]

kbc590, да никто не занимается выгрузкой, посмотрите на тот же ФБ или ВК, скролите контакты и спустя тысячу браузер крэшится :)

[Тарас Шульга]

tukreb, согласен - да и вообще сколько там нужно проскролить шоб сайт упал?
Да и если вы тут не решили гугль/яндекс и т.д. двигать в плане фоток - то уже лишняя морока

[kbc590]

Тарас Шульга, нет такой задачи. Есть большие архивы фоток, вот, нужно сделать просмотр для них. Хочется как в Гугл-фотках и АйФото

Answer 2

[good_beginer]

Lazy Loading или в переводе - пасивная загрузка. Никто не может просмотреть всю тысячу фотографии сразу поэтому иммет смысл их загружать постепенно, по несколько.

Comments

[kbc590]

Догружать понятная задача. Она усложняется быстрым переходом, например, в самое начало фотогалереи.

[good_beginer]

Если проводить ну же аналогию с гулом то у них несколько картинок. Можно в этом удостовериться просто открыв консоль и проскролив сильно вниз. Сразу - загружаются картинки в максимально сжатом состоянии которые почти ничего не весят. При нажатии делается опять же запрос и стягивется картинка уже в нормальном качестве для просмотра. Если заметить. Они ничего не удаляют после скрола. в этом просто нет смысла. Лишняя нагрузка на браузер что то там вычсчитывать и удалять. Загрузил 1000 картинок в крайне маленьком разрешении и при нажатии, если полюзователю нужно - видит нормальное изображение.

Answer 3

[Алексей Уколов]

Для этого используется виртуальный скролл. Но заставить его нормально работать на негомогенных блоках — задача не из лёгких.

Comments

[kbc590]

А что такое виртуальный скролл? Где об этом можно прочитать с примерами?

[Алексей Уколов]

Буду рад поисковому запросу.

:)