Как оптимально разместить картинки на сайте?

Question

[pepvvell]

Есть сайт с горизонтальным скроллом.
Планируется разместить большое количество изображений (несколько тысяч) на одной странице. Средний вес картинки - 1мб.
Как лучше организовать их просмотр? Использовать ли бесконечный скролл с lazyload или не стоит? Может лучше отказаться от идеи одна страница - много картинок?

Comments

[Rustam Bainazarov]

Ясен пень, что это безумие.

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

Короче, повторить идею вот отсюда, только для блоков с картинками:
https://clusterize.js.org/

Ибо у вас даже без учёта веса картинок такой объёмный DOM будет дико лагать.

[pepvvell]

Хорошая ссылка, попробую разобраться, спасибо.

Answer 1

[Андрей Гаврилов]

Использовать отдельный cdn ну и использовать tinypng для сжатия картинок

Answer 2

[Ross Alex]

Можно использовать и infinity scroll, и lazyload. Вопрос тупизны браузера, когда это все дойдет до огромного размера. Ну вот именно так работает pinterest, так что можно его продебажить. Возможно, скрывать (visibility:hidden) фотки, которые находятся вне видимой области. Но нужно это делать так, чтобы элементы занимали место и скролл не уменьшался. Также, скриптом считывать высоту и сделать скрипт ресайза фоток на лету с кешом, использовать lossless или lossy компрессоры, типа tinypng.