Загрузите 1000 изображений

У меня есть 1000 изображений на одной странице. К сожалению, я не могу использовать спрайты на них, так как количество изображений непрерывно увеличивается. Таким образом, вы можете себе представить, что он отправляет 1000 HTTP-запросов, поэтому для загрузки изображений требуется много времени, а это не очень полезно для посетителей.

Я видел один из сценариев, названный Lazy Load, но я думал, есть ли более умный способ загрузки изображений (хорошо о SEO, загружает изображения быстрее и хорошо подходит для пользователей).

Есть ли способ, чтобы загрузить изображения лучше?

Разработать:

Мне нужно загрузить все 1000 изображений на одной странице, другого выхода нет. Как это будет выглядеть или для чего я буду использовать его, я действительно сделал тестовую страницу для вас в http://bloghutsbeta.blogspot.com/2012/03/testing-2_04.html.

Как вы можете видеть, я использую плагин jQuery Quicksand, сделанный Яцеком Галанциаком. У меня нет хороших отношений с этим плагином, как будто я собираюсь добавить jQuery или script к нему. Он попросит функцию обратного вызова, которая является для меня слепой точкой. (Вот почему я сделал для него CSS-подсказку: D)

У меня много фотографий на моей тестовой странице, но не 1000. Когда их будет 1000, это будет беспорядок. Поэтому я не знаю, как обрабатывать 1000 изображений в этом случае. (Кстати, СПАСИБО ВАМ ВСЕ ДЛЯ ЛЮБЫХ КОММЕНТАРИЙ)

Ответ 1

Очень немногие варианты использования поддерживают сотни или тысячи изображений на одной странице. Одним из таких случаев является Google Images. Вот как это сделать:

https://www.google.com/search?tbm=isch&q=jeff+atwood

Lazy load images Это требование. Если изображения находятся ниже складок (за пределами видимой области документа), нет причин для их загрузки.
Использовать разбиение на страницы. Google Images разбивает результаты на страницы, где в то время загружается только несколько изображений. Google также использует некоторый JavaScript-fu для реализации бесконечного прокрутки - как только браузер приблизится к нижней части текущих результатов, он отправляет запрос на загрузку большего количества страниц результатов и вводит их в нижней части страницы.
SEO: нет JavaScript, нет проблем. Еще раз перейдите по ссылке "Изображения Google", но с отключенным JavaScript. Вы можете просматривать страницы результатов - там около 15 изображений на странице. Поисковые системы могут индексировать это изображение.
Максимальное отображение изображения. Когда отображается более 150 изображений, нажмите кнопку в нижней части страницы, чтобы "загрузить дополнительные результаты" - эта кнопка перезагружает всю страницу, но запускает на 151-м изображении вместо 1-го. Каждое изображение, которое браузер должен рисовать, занимает больше памяти и циклов процессора. Прокрутка длинного списка позволяет быстро принести мобильный браузер или скромный рабочий стол для сканирования.

Загрузка тысяч изображений плохая - она наложит ваш сервер на управление пользовательским интерфейсом. Это относится к любому большому набору данных, который пользователь хочет просмотреть.

Ответ 2

Лучший ответ, который я могу придумать:

Не делайте этого. Не загружайте 1000 изображений на один сайт, а используйте какую-то ленивую загрузку или разбивку на страницы.

Тем не менее, одна идея, не уверена, подходит ли она, поскольку вы никогда не давали конкретного варианта использования: выполните cron, чтобы сшить изображения вместе на несколько больших изображений в течение X минут в зависимости от ваших потребностей. Используйте большее изображение, так как вы использовали бы спрайт-решение.

Ответ 3

Несколько лет назад, я думаю, 2010 год, Парад национального парада в Сингапуре имел несколько фотографий, таких как 20 x 20 из них. Каждый день в часы пик работала база данных (MySQL) и веб-сервер (Apache).

Затем команда разработчиков развернула memcached, чтобы решить проблему.

Ответ 4

Используйте ленивую загрузку для рендеринга этих изображений, когда пользователь прокручивает страницу загрузки изображений на лету.

Это сложный способ, когда вы загружаете несколько снимков (N число) и проверяете, что пользователь не прокручивается до тех пор, пока осталось несколько строк изображений до containerNode.offsetHeight. Если пользователь прокручивает этот предел, вы создаете N количество тегов изображений для следующих n загружаемых изображений.

Этот N может варьироваться в зависимости от размера или размеров файла изображения.

Ответ 5

Попробуйте плагин QueryLoader 2. Это не поможет вам быстрее загрузить их - как вы говорите, увеличение числа - но оно покажет экран загрузки, пока элементы все еще загружаются, и может предоставить вам лучший пользовательский интерфейс.

Это или сделайте так, как в некоторых других ответах, и загрузите их при прокрутке вниз.