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

Question

Я занимаюсь разработкой веб-сайта, который позволяет пользователю просматривать и настраивать продукт.Я хотел начать этот проект с использованием jquery, css3 и html5 с постепенной деградацией для старых браузеров.

Я объединил все самые маленькие изображения в нескольких спрайтах, чтобы уменьшить количество запросов http (изображения будут обслуживатьсяиз поддоменов без печенья).Кстати, продукт должен быть виден на 360 ° для каждой комбинации конфигураций.В результате получается 2252 изображения (всего 15 МБ).

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

На самом деле я предварительно загружаю изображения только для вида продукта по умолчанию, затем, когда пользователь меняет настройки, я загружаю необходимые изображения (здесь помогает jQuery).Когда изображения загружаются, пользователь увидит «загрузочный» gif.Стоит ли предварительно загружать изображения также, когда они их не запрашивают?

Изображения будут кэшироваться браузером, поэтому каждое изображение будет иметь ответ 304 Not Modified.Есть ли у вас какие-либо советы или предложения по улучшению взаимодействия с пользователем?

Спасибо.

Answer 1

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

Если существуют различные «атрибуты», которые более распространены, чем другие, возможно, вы захотите предварительно загрузить несколько избранных?Например, (я не знаю, какой у вас продукт), если у вас красная рубашка и розовая рубашка XXXL в клетку, вы можете сначала предварительно загрузить красную;)

Одна вещь, которую я делаю вВ таких ситуациях нужно играть с анимационными эффектами в jQuery (исчезать, скользить и т. д.).Вы можете исчезнуть при изменении атрибута.Эта анимация займет, возможно, 600 миллисекунд, что было бы хорошим отрезком времени, необходимого для загрузки и получения этого изображения с сервера.В результате воспринимается меньшее время ожидания для нового представления / атрибута.

Answer 2

Обслуживание изображений из CDN, например amazon s3, может немного улучшить время загрузки.Что касается предварительной загрузки по шагам - это может зависеть от продукта.Кое-что с большей вероятностью будет вращаться - например, автомобиль, как сказал Лэндон.Лично я бы не стал крутить рубашку, но, наверное, машину.Таким образом, решение может быть основано на ожидаемом использовании вашего сайта.