Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up

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


Recommended Posts

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

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

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

Движок 1.5.5.1.1

Link to post
Share on other sites

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

Link to post
Share on other sites

Которы

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

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

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

Link to post
Share on other sites

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

Edited by SAPER1985
Link to post
Share on other sites

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

Link to post
Share on other sites

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

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

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

Edited by Gorman
Link to post
Share on other sites

Вот для лучшего понимания кусок кода, который загружает на страницу 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>

 

Edited by IgorDmitrenko
Link to post
Share on other sites

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

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

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

Link to post
Share on other sites

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

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.