Нужно изменить вывод доп. изображений в категории

[IgorDmitrenko]

Шаблон Univer. В категории на карточках товаров есть вывод миниатюр доп. изображений. При наведении на миниатюру, изображение на карточке товара меняется.

Спойлер

http://joxi.ru/8Ano9BBtjO8xBr

Всё работает, быстро и хорошо. Проблема в том, что на страницу подгружаются все миниатюры, размеры которых 50x65px, в полный размер - 225x300px. Что не есть гуд. Нужно это исправить. Миниатюры должны загрузиться в своём родном размере - 50x65px. А при наведении вывести нужное изображение на карточку товара уже в "полном" размере 225x300px.

Пример страницы, где это всё есть:

Спойлер

http://becherry.ru/women_underwear/bra/aveline-bra/

Движок 1.5.5.1.1

[SAPER1985]

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

[IgorDmitrenko]

Которы

5 минут назад, SAPER1985 сказал:

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

...Который выводится на морду карточки товара. Функционал так реализован: в категорию обычным образом выводятся товары с одним изображением. При наведении мышки на карточку товара появляются миниатюры (те самые 50x65). при наведении на миниатюру основное изображение на карточке товара меняется. Известный функционал, но в этом шаблоне реализован "ленивым" образом. На страницу сразу загружаются ВСЕ изображения размером 250x300. И те, которые нужны - основные на морде карточки товара. И те, которые вначале выводятся только как миниатюры 50x65. Нужно, чтобы на странице при первой загрузке все изображения миниатюр были подгружены в размере 50x65. И только при наведении мышки на миниатюру, основное фото менялось, соответственно и изображение 250x300 подгружалось только один раз, когда надо.

[SAPER1985]

Тут проблема будет вот в чем, при наведении будет отправляться запрос на подгрузку миниатюры в "морду" карточки товара. То есть смена не будет происходить моментально, именно для этого они в полном размеры подгружаются сразу. -Да, это большая проблема, если у товаров куча миниатюр и товаров много. Есть решение сделать "ленивую" загрузку изображений, то есть подгружать их, как только элемент попадает в поле видимости юзера, но без ущерба для SEO я таких решений не видел. Есть еще один вариант облегчить загрузку вашей страницы- прогнать все картинки, которые у вас после рейсайза лежат примерно в  /image/cache/250-300/data/product_img/ через программу Riot, которая позволяет оптимизировать изображения без видимой потери качества, иногда в несколько раз сокращая размер. 

Змінено 18 лютого 2018 користувачем SAPER1985

[IgorDmitrenko]

"Старшие братья" как-то решили этот вопрос. Конечно, там возможности другие, но может есть какой-то компромисс. В конце концов - "не моментально" вполне может быть рабочим вариантом, вряд ли один запрос и загрузка картинки 7-9 кБ вызовет большую задержку. Посмотрел, кажется у wildberries.ru и laredoute.ru именно так сделано. По наведении мышкой большие фото просто подгружаются. Это, очевидно, выгоднее, чем сразу грузить кучу ненужных килобайт.

[Gorman]

А миниатюры картинок у вас есть, или сначала нужно исходные изображения обработать перед выводом?

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

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

Змінено 18 лютого 2018 користувачем Gorman

[IgorDmitrenko]

Вот для лучшего понимания кусок кода, который загружает на страницу 6 изображений размером 225x300 для одного товара. Одно из них используется как основное и показывается на карточке именно в таком размере. Остальные 5 выводятся миниатюрами на карточке товара слева с размерами 50x66. Этот размер задаётся в стилях, но грузятся на страницу для миниатюр большие изображения. Это и нужно изменить. Загружать для миниатюр маленькие (50x66), а выводить на карточку (заменять основное) при наведении мышки на миниатюру, большое (225x300), подгружая его.

Спойлер

<div class="owl-addimagecat owl-carousel">
							<div data-index="0">
								<a href="http://becherry.ru/womenwears/big-sizes/bigsize-dresses/plate-wisell-p3-3312-7" title="Платье Wisell П3-3312/7" data-image="http://becherry.ru/image/cache/data/wisell/bigsizes/dresses/3/143531390-plate-wisell-p3-3312-7-225x300.jpg">
                               <img src="http://becherry.ru/image/cache/data/wisell/bigsizes/dresses/3/143531390-plate-wisell-p3-3312-7-225x300.jpg" title="Платье Wisell П3-3312/7" alt="Платье Wisell П3-3312/7"></a>
							</div>
							 							<div data-index="1" class="image0">
                                <a href="http://becherry.ru/womenwears/big-sizes/bigsize-dresses/plate-wisell-p3-3312-7" title="Платье Wisell П3-3312/7" data-image="http://becherry.ru/image/cache/data/wisell/bigsizes/dresses/3/634357753-plate-wisell-p3-3312-7-225x300.jpg">
                                <img src="http://becherry.ru/image/cache/data/wisell/bigsizes/dresses/3/634357753-plate-wisell-p3-3312-7-225x300.jpg" alt="Платье Wisell П3-3312/7"></a>
							</div>
														<div data-index="2" class="image1">
                                <a href="http://becherry.ru/womenwears/big-sizes/bigsize-dresses/plate-wisell-p3-3312-7" title="Платье Wisell П3-3312/7" data-image="http://becherry.ru/image/cache/data/wisell/bigsizes/dresses/3/221260701-plate-wisell-p3-3312-7-225x300.jpg">
                                <img src="http://becherry.ru/image/cache/data/wisell/bigsizes/dresses/3/221260701-plate-wisell-p3-3312-7-225x300.jpg" alt="Платье Wisell П3-3312/7"></a>
							</div>
														<div data-index="3" class="image2">
                                <a href="http://becherry.ru/womenwears/big-sizes/bigsize-dresses/plate-wisell-p3-3312-7" title="Платье Wisell П3-3312/7" data-image="http://becherry.ru/image/cache/data/wisell/bigsizes/dresses/3/963607337-plate-wisell-p3-3312-7-225x300.jpg">
                                <img src="http://becherry.ru/image/cache/data/wisell/bigsizes/dresses/3/963607337-plate-wisell-p3-3312-7-225x300.jpg" alt="Платье Wisell П3-3312/7"></a>
							</div>
														<div data-index="4" class="image3">
                                <a href="http://becherry.ru/womenwears/big-sizes/bigsize-dresses/plate-wisell-p3-3312-7" title="Платье Wisell П3-3312/7" data-image="http://becherry.ru/image/cache/data/wisell/bigsizes/dresses/3/202507263-plate-wisell-p3-3312-7-225x300.jpg">
                                <img src="http://becherry.ru/image/cache/data/wisell/bigsizes/dresses/3/202507263-plate-wisell-p3-3312-7-225x300.jpg" alt="Платье Wisell П3-3312/7"></a>
							</div>
														<div data-index="5" class="image4">
                                <a href="http://becherry.ru/womenwears/big-sizes/bigsize-dresses/plate-wisell-p3-3312-7" title="Платье Wisell П3-3312/7" data-image="http://becherry.ru/image/cache/data/wisell/bigsizes/dresses/3/920931663-plate-wisell-p3-3312-7-225x300.jpg">
                                <img src="http://becherry.ru/image/cache/data/wisell/bigsizes/dresses/3/920931663-plate-wisell-p3-3312-7-225x300.jpg" alt="Платье Wisell П3-3312/7"></a>
							</div>
							   
						</div>

 

Змінено 18 лютого 2018 користувачем IgorDmitrenko

[Gorman]

Это все понятно, код вывода я уже посмотрел :)вопрос вот в чем. 

Вы сказали браузеру через стили,  что эти картинки-миниатюры должны отображаться с размерами 50 на 66, он собственно это и делает. Но сжимать их (физически, уменьшая вес) за вас он же не будет. Браузер просто адаптирует их вид под нужный размер. 

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

[IgorDmitrenko]

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

[Gorman]

Напишите мне в личку плиз, подумаем как лучше сделать