Вопрос дня. Голосования — «Выбираем самый красивый чайник»
Изначально существовало две темы для одной и той же механики «Это или Это»: эта (реальные товары, чайники) и более ранняя — про цвет холодильника (ook-917-pair-choice-mobile-tobe.html). По прямому запросу тема про цвет холодильника удалена — этот файл теперь единственная версия механики «Это или Это», на него ведут все ссылки «Голосование» из общего списка опросов.
Реальные картинки и реальная ссылка на товар — по прямому запросу пользователя. 6 фото чайников — прямые ссылки на CDN холодильник.ру (holod.ru/pics/...), присланы пользователем, встроены как есть (внешние <img src>, не локальные копии — если картинки в источнике изменятся или переедут, здесь это отразится автоматически, но и упадёт, если ссылка перестанет открываться). В итоговой статистике миниатюра каждого чайника — кликабельная ссылка на карточку товара; по прямому указанию пользователя («зашей для всех одну ссылку, прям как есть») на ВСЕ 6 миниатюр стоит одна и та же реальная ссылка (.../small_domestic/teapots/brayer/1083br_ye_2200_vt_1_7_l/), а не индивидуальные ссылки каждого товара — это осознанное упрощение прототипа по прямой просьбе, а не ошибка; в реальном продукте у каждого варианта должна быть своя карточка.
Названия вариантов — только внутренние данные, нигде не показываются текстом. Короткие описательные подписи по внешнему виду чайника на фото (например, «Цветочный», «Стеклянный красный») придуманы для прототипа, не официальные названия товаров, и используются только как ключ для сортировки/подсветки статистики и как alt у картинок (для доступности, не видно визуально) — по прямому запросу («под вариантами ответов и в фото-победителе убери подписи... там названий не будет») текстовая подпись убрана из-под карточек выбора и из-под фото победителя. Раньше подписи оставались в раундах и у победителя и были убраны только из итоговой статистики (см. ниже) — теперь текст не показывается нигде на экране.
Итоговая статистика с миниатюрами, без текстовых названий — по более раннему прямому фидбэку («убери названия для чайников — их никто добавлять не будет», то есть в реальном продукте никто не будет вручную писать подпись под каждым SKU в этом блоке) текстовые названия и ссылки-подписи убраны из строк статистики. Осталась только миниатюра (сама кликабельна, ведёт на товар) и процент; своя строка выделяется акцентной рамкой вокруг миниатюры (тот же приём, что у фото победителя выше) и подсвеченными баром/процентом — вместо подписи «Ваш выбор» текстом. Проценты — тот же принцип демо-среза, что и в версии с цветами, случайно подобраны для прототипа.
Предзагрузка всех 6 фото — по прямому запросу («подгрузка картинок тормозит, нужна предзагрузка, чтобы всё было мгновенно»). Без предзагрузки браузер начинал качать фото нового претендента только в момент смены раунда (когда скрипт подставляет его в <img src>), отсюда заметная задержка на слабом соединении. В <head> добавлены 6 тегов <link rel="preload" as="image"> — по одному на каждое фото; они запускают закачку сразу при разборе HTML, ещё до того, как выполнится скрипт в конце страницы, поэтому даже самая первая пара показывается без задержки, а к моменту показа любого следующего раунда файл уже в кэше браузера. Список URL продублирован между <link> в head и массивом KETTLES в скрипте — при замене фото нужно поменять оба места, общего компонента для этого нет. Предзагрузка ускоряет повторные показы и, на быстром соединении, первый показ тоже, но не убирает саму сетевую задержку скачивания 6 файлов с внешнего CDN при первом заходе на медленном канале — это ограничение источника картинок (внешний holod.ru, не локальные файлы), а не то, что можно решить только предзагрузкой.