Лучшие практики по загрузке изображений для интерфейса настройки продукта

Question

В настоящее время я создаю интерфейс настройщика продукта, где пользователи могут выбирать цвета для различных компонентов в сумке и просматривать предварительный просмотр в режиме реального времени, например: https://hudson-sutler-dev.myshopify.com/products/weekender

Как я это настроил: различные компоненты пакета - это изображения, которые наложены друг на друга в виде прозрачных PNG. Когда пользователь выбирает образец цвета, запускается функция $.attr jQuery, чтобы заменить файл img src на основном изображении - новый src получен из фактических образцов в качестве атрибутов данных.

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

Кто-нибудь знает, что будет лучшим для этого? Должен ли я просто загрузить все изображения сразу при загрузке страницы? Какие интересные реализации для этой проблемы?

Answer 1

Учитывая ваши текущие активы, одним из способов улучшить время отклика будет загрузка всех изображений как скрытых HTML элементы. Некоторые из них получат выгоду от того, что уже загружены, когда их просят.

Однако это произойдет за счет увеличения трафика для ваших пользователей, и подавляющее большинство ваших изображений будут загружаться без необходимости. Поскольку большая часть сегодняшнего трафика является мобильной, это действительно очень плохо. Гораздо хуже, чем у вас сейчас, ИМХО.

Но у вас есть альтернативы:

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

2. Учитывая ваш конкретный вариант использования, создайте один ч / б .png Создайте файл для каждого типа мешка, комбинируя маски прозрачности из слоев света и темноты в выбранном вами фоторедакторе, и визуализируйте эту маску над контейнером, изменяя только цвет фона. Просто, эффективно и, уверяю вас, никто не сможет заметить разницу. Если ваши сумки имеют разную текстуру, вам, очевидно, понадобится более 1 маски, но это гораздо лучше, чем иметь изображение для каждого цвета.

3. Альтернативой вышесказанному является использование одного изображения и фильтров CSS (hue-rotate а также saturate). Но имейте в виду, что они не полностью поддержаны. Этот пример довольно близок к тому, что вы ищете.

2. и 3. разрешить анимацию вращения оттенка.