Как мы можем мгновенно загрузить галерею изображений товаров без задержки в magento?

11

это мой первый вопрос со мной :)

Проблема: Галерея фоторамки, используемая в magento 2, замедляет работу пользователя. Не имеет значения, насколько быстро работает мой кэшированный статический magento 2, если изображение продукта не является «мгновенным».

https://www.ninewest.co.uk/sandals/high-heel/allclear-black-snake-print-nine-west

Если вы перейдете по указанной выше ссылке (магазин, показанный в блоге magento), вы увидите, что он открывается, затем отображается значок загрузки, а затем загружаются изображения. Это ужасно.

Он должен загружаться мгновенно. Как Бамм. Готово, особенно с полным кэшированием страниц и включенным opcache.

Есть ли способ изменить это поведение? Чтобы загрузить его мгновенно?

Для пользователя это самый важный «элемент» на странице. и он загружается как последний .

Я не понимаю, как никто не жалуется на это.

Это электронная коммерция, единственное, что имеет значение, это «картинки». Это то, что заботит пользователя. Причина, по которой они нажимают на странице продукта, заключается в том, чтобы «лучше видеть изображения. Лично для меня это действительно беспокоит меня. Без причины я становлюсь супер злой, а затем я спрашиваю себя, сошел ли я с ума?

Заранее спасибо, я просто запутался, как такое могло произойти.

На моем magento 1 загружается мгновенно.

magento2 product-images magento-2.1 fotorama-slider Fancyman
источник
Согласитесь, по крайней мере, базовое изображение может отображаться во время загрузки фоторамки. Я должен построить модуль, чтобы сделать это.
Аарон Аллен
Они добавили его в запрос на улучшение функции. На мобильном это еще хуже. Но забавно то, что когда вы заходите на мобильный сайт с фоторамкой, эта большая галерея изображений загружается быстрее, чем magento. Когда вы делаете обновление, это почти мгновенно. Проблема заключается в magento.
Fancyman
Наверняка должно быть исправить это сейчас? Это все еще очень медленно, спасибо за вопрос, я буду проверять это, чтобы увидеть, изменится ли что-нибудь, ха-ха.
Энди Джонс
Иногда эта команда будет работать: php bin / magento catalog: images: resize
Saphal Jha
Что это значит и как это сделать «Исправление для прыжкового контента. Загрузчик должен быть того же размера, что и галерея» Я обнаружил одну проблему, когда загрузка моего продукта, чем на изображении, сначала малая, а затем большая
Akbar Mo

Ответы:

10

Вот простое решение, которое заставит отображаться базовое изображение продукта во время загрузки JS. Создайте в вашей теме следующий файл: {theme_dir}/Magento_Catalog/templates/product/view/gallery.phtml содержащий:

<div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder">
    <div data-role="loader" class="loading-mask">
        <div class="loader">

            <img src="<?php echo $block->getGalleryImages()->getFirstItem()->getData('medium_image_url') ?>" style="max-width: 100%; max-height: 100%">

            <img src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>"
                 alt="<?php /* @escapeNotVerified */ echo __('Loading...') ?>">
        </div>
    </div>
</div>
<!--Fix for jumping content. Loader must be the same size as gallery.-->
<script>
    var config = {
            "width": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'width'); ?>,
            "thumbheight": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'height')
                        ?: $block->getImageAttribute('product_page_image_small', 'width'); ?>,
            "navtype": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/navtype"); ?>",
            "height": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'height'); ?>
        },
        thumbBarHeight = 0,
        loader = document.querySelectorAll('[data-gallery-role="gallery-placeholder"] [data-role="loader"]')[0];

    if (config.navtype === 'horizontal') {
        thumbBarHeight = config.thumbheight;
    }

    loader.style.paddingBottom = ( config.height / config.width * 100) + "%";
</script>
<script type="text/x-magento-init">
    {
        "[data-gallery-role=gallery-placeholder]": {
            "mage/gallery/gallery": {
                "mixins":["magnifier/magnify"],
                "magnifierOpts": <?php /* @escapeNotVerified */ echo $block->getMagnifier(); ?>,
                "data": <?php /* @escapeNotVerified */ echo $block->getGalleryImagesJson(); ?>,
                "options": {
                    "nav": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/nav"); ?>",
                    <?php if (($block->getVar("gallery/loop"))): ?>
                        "loop": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/loop"); ?>,
                    <?php endif; ?>
                    <?php if (($block->getVar("gallery/keyboard"))): ?>
                        "keyboard": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/keyboard"); ?>,
                    <?php endif; ?>
                    <?php if (($block->getVar("gallery/arrows"))): ?>
                        "arrows": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/arrows"); ?>,
                    <?php endif; ?>
                    <?php if (($block->getVar("gallery/allowfullscreen"))): ?>
                        "allowfullscreen": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/allowfullscreen"); ?>,
                    <?php endif; ?>
                    <?php if (($block->getVar("gallery/caption"))): ?>
                        "showCaption": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/caption"); ?>,
                    <?php endif; ?>
                    "width": "<?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'width'); ?>",
                    "thumbwidth": "<?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'width'); ?>",
                    <?php if ($block->getImageAttribute('product_page_image_small', 'height') || $block->getImageAttribute('product_page_image_small', 'width')): ?>
                        "thumbheight": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'height')
                        ?: $block->getImageAttribute('product_page_image_small', 'width'); ?>,
                    <?php endif; ?>
                    <?php if ($block->getImageAttribute('product_page_image_medium', 'height') || $block->getImageAttribute('product_page_image_medium', 'width')): ?>
                        "height": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'height')
                        ?: $block->getImageAttribute('product_page_image_medium', 'width'); ?>,
                    <?php endif; ?>
                    <?php if ($block->getVar("gallery/transition/duration")): ?>
                        "transitionduration": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/transition/duration"); ?>,
                    <?php endif; ?>
                    "transition": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/transition/effect"); ?>",
                    <?php if (($block->getVar("gallery/navarrows"))): ?>
                        "navarrows": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/navarrows"); ?>,
                    <?php endif; ?>
                    "navtype": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/navtype"); ?>",
                    "navdir": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/navdir"); ?>"
                },
                "fullscreen": {
                    "nav": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/nav"); ?>",
                    <?php if ($block->getVar("gallery/fullscreen/loop")): ?>
                        "loop": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/loop"); ?>,
                    <?php endif; ?>
                    "navdir": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/navdir"); ?>",
                    <?php if ($block->getVar("gallery/transition/navarrows")): ?>
                        "navarrows": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/navarrows"); ?>,
                    <?php endif; ?>
                    "navtype": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/navtype"); ?>",
                    <?php if ($block->getVar("gallery/fullscreen/arrows")): ?>
                        "arrows": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/arrows"); ?>,
                    <?php endif; ?>
                    <?php if ($block->getVar("gallery/fullscreen/caption")): ?>
                        "showCaption": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/caption"); ?>,
                    <?php endif; ?>
                    <?php if ($block->getVar("gallery/fullscreen/transition/duration")): ?>
                        "transitionduration": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/transition/duration"); ?>,
                    <?php endif; ?>
                    "transition": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/transition/effect"); ?>"
                },
                "breakpoints": <?php /* @escapeNotVerified */ echo $block->getBreakpoints(); ?>
            }
        }
    }
</script>

Надеюсь это поможет.

Аарон Аллен
источник
Спасибо Аарон! Я попробую сегодня вечером, когда буду дома! Действительно ценю это!
Fancyman
Аарон, я попробовал это. Оно работает. Это хорошее временное решение, но я бы хотел, чтобы они могли исправить скорость загрузки галереи. Я не понимаю, почему он загружается так медленно. На сайте фоторамки это большая галерея, и она загружается мгновенно. Вы даже можете примерить свой мобильный fotorama.io, вы можете увидеть, что он намного быстрее, а изображения намного больше.
Fancyman
@ Аарон Аллен, пожалуйста, объясни, что ты сделал, с комментарием в посте или в коде.
LucScu
1
Я добавил строку для первого imgэлемента.
Аарон Аллен
Это работало для меня на Magento EE 2.1.7.
запасной цикл
1

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

Все, что мне нужно было сделать, это добавить изображение с помощью встроенного CSS и добавить padding-bottom: 100% к маске загрузки.

...
<div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder">
    <div data-role="loader" class="loading-mask" style="padding-bottom:100%;">
        <div class="loader">
            <img src="<?php echo $_product->getData('img_url'); ?>" style="max-width: 100%; max-height: 100%; display: block;">
            <img src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>"
                 alt="<?php /* @escapeNotVerified */ echo __('Loading...') ?>">
        </div>
    </div>
</div>
...

Это очень похоже на ответ выше, но я хотел добавить свои 2 цента.

Джеймс Харрингтон
источник