Как загрузить большое количество картинок?

Question

[mr jeery]

Создаю фотогалерею и придётся загружать, в общей сложности, 500-1000 фотографий.
Буду загружать через background-image: url().

Можно ли как-то автоматизировать этот процесс ?
Приходит в голову решение на js с помощью цикла:
1. Создать нужное количество div, создать массив из них.
2. Создать строчный массив из имен файлов.
3. и менять this.style.background-image в цикле

Answer 1

[ой всё]

lazy load, иначе ваша страница умрет не родившись
все 500-1000 картинок же не влезут в один экран
грузите сначала два экрана и при скроллинге на второй догружайте по одному
проще сделать pagination - бесконечный сролл, особенно картинок, раздражает, с pagination легче вернуться, если что-то пропустил

Comments

[Модератор]

triggerfinger, Andrew Ghostuhin, отношения выясняйте за пределами ресурса. За любым оффтоп последует бан.

[Модератор]

Andrew Ghostuhin, не имею привычки писать не читая. И не следует принимать предупреждения за угрозы.
Теперь у вас есть время неспешно понять что здесь ожидают от пользователей.

[Anton Mashletov]

pagination для картинок это прошлый век. wallhaven.cc вот эталон галереи.

[Александр Юдаков]

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

Это — если делать тяп-ляп.

А если по-человечески, — то возврат будет в то же самое место, откуда пользователь ушел.
Запоминаем кусок DOM-дерева в переменной, запоминаем scrollTop — а потом возвращаем все это обратно.
HTML5 History API поддерживается сейчас везде: https://caniuse.com/#feat=history

P.S. Сайт ВКонтакте откройте, полистайте там альбомы с фотографиями.

[ой всё]

Александр Юдаков,

это если пользователь ушел
а если нет?
старайтесь не высказывать поспешные суждения, если вам не хватает опыта

[ой всё]

Anton Mashletov, там нет галереи
это спам

[DevMan]

ой всё,

там нет галереи
это спам

есть

старайтесь не высказывать поспешные суждения, если вам не хватает опыта

старайтесь не давать советов, которым сами и не следуете.

[ой всё]

DevMan, жалоба на спам уже отправлена

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

[DevMan]

ой всё, там есть галлерея.
если ве не можете ее найти/увидеть, то старайтесь воздерживаться от вступления в дискуссию.

и повторюсь: старайтесь не давать советов, которым сами не следуете.

[Anton Mashletov]

ой всё, там весь сайт — галерея, разуй глаза. И это довольно известный ресурс, чтобы быть спамом. Ссылка на гугл тоже спам?

Answer 2

[Алексей Скляров]

По-моему проще просто сделать php цикл и брать изображения из папки. Так как у вас будет foreach, вам не нужно знать сколько изображений будет в папке - все на автомате.

Comments

[mr jeery]

Не знаком пока что с php.
А как быстрее будет?

[Алексей Скляров]

mr jeery, вам нужно не быстрее, а под вашу задачу. Если задача ставиться как: создать html-код с 500-100 слайдами, то вам в php, если задача иная - то возможно пригодится JS

[triggerfinger]

Алексей Скляров, ересь

[prodavec macdonalds]

triggerfinger, аргументы?

[triggerfinger]

prodavec macdonalds, при чем тут пхп?

[ThunderCat]

triggerfinger,

при чем тут пхп?

ну так:

Можно ли как-то автоматизировать этот процесс ?

ответ - да, можно, проще всего со стороны сервера.

2. Создать строчный массив из имен файлов.

Руками - это не удачное решение в свете предыдущего пункта. Напрашивается вывод - проще сделать на сервере в автомате, самое простое - на пыхе.

[triggerfinger]

ThunderCat, или взять ЛЮБОЙ фронт-енд фреймворк и забыть о ПХП навсегда?

[ThunderCat]

triggerfinger, ок, набросайте мне по быстренькому как вытащить из произвольной папки на сервере все картинки (имена файлов нам не известны) на ЛЮБОМ фронт-енд фреймворке. Можно чисто описательно.

[triggerfinger]

ThunderCat, а кто вам сказал что имена файлов не известны? Что вы подставлять собрались, если имена файлов не известны?)))

[ThunderCat]

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

[triggerfinger]

ThunderCat, т - тупость.

Какое отношение фронтенд фреймворк имеет к серверу?
Откуда навязчивая мысль что имена файлов не известны? Этого в вопросе нету.
На Ноде это делается в 3 строчки - и что теперь?

[triggerfinger]

ThunderCat, "На любом серверсайд языке( хоть на башскрипте) создаем список файлв и отдаем в хтмл как готовую строку. " - нормальные люди для таких целей сегодня используют API, а не рендарят по 1000 элементов на сервере каждый запрос))) Компетентность блин.

[ThunderCat]

triggerfinger,

сколько их абсолютно не важно, как и то как они называются

а не

Откуда навязчивая мысль что имена файлов не известны?

Чувствуете тонкую разницу?

придётся загружать, в общей сложности, 500-1000 фотографий.

и

2. Создать строчный массив из имен файлов.

то есть руками вписать имена 1000 файлов.

Можно ли как-то автоматизировать этот процесс ?

Ответ - да, как я уже 2 раза описал.

[triggerfinger]

ThunderCat, вы не видите разницу между "количество и названия не важны" и "количество и названия не известны"? Вы логику изучали в университете? Как вам программируется по жизни без нее вообще?

[ThunderCat]

triggerfinger, перечитайте что я написал, это не одно и тоже, я не говорил что неизвестны, сказал что это не важно известны или нет. То есть как раз и вижу разницу. Dixi.

[triggerfinger]

ThunderCat, в том-то и дело. Если это не важно, то акцент вопроса смещается с сервера (пхп, получения имени файлов) на фронт - непосредственно динамический рендер элементов (а откуда данные поступают и как - в вопросе не спрашивается и не уточняется, все вопросы только о фронте). Или мне пора спать и я не понял ни вопроса ни вашего ответа.

[triggerfinger]

Первое вероятно - вопрос составлен по-идиотски.