Як ми можемо миттєво завантажувати галерею зображень продуктів без затримки в магенто?

це мій перший вопросин голий зі мною :)

Проблема: Галерея фоторам, що використовується в магенто 2, робить користувацький досвід млявим. Не має значення, наскільки швидко проходить кешований статичний magento 2, якщо зображення продукту не "миттєве".

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

Якщо ви переходите до вищезазначеного посилання (у магазині, розміщеному на блозі magento), ви бачите, що він відкривається, він показує значок завантаження, а потім завантажує зображення. Це жахливо.

Він повинен завантажуватися миттєво. Як бамбук. Готово, спеціально із увімкненим кешем на повній сторінці та опкаш.

Чи є спосіб змінити таку поведінку? Щоб завантажити його миттєво?

Для користувача це найважливіший "елемент" на сторінці. і він завантажується як останній .

Я не розумію, як ніхто на це не скаржиться.

Це електронна комерція, єдине, що має значення, - це "фотографії". Користувач піклується про це. Причина, по якій вони клацають на сторінці продукту, полягає в тому, щоб "краще побачити зображення. Особисто для мене це справді клопоче мене. Без жодної причини я стаю супер злим і тоді я запитую себе, якщо я божевільний?

Заздалегідь дякую, я просто заплутався, як таке може статися.

На моєму magento 1 воно завантажується миттєво.

— Фантазія
джерело

Домовились, вони могли принаймні відображати базове зображення під час завантаження фоторами. Мені доведеться створити модуль для цього.

— Аарон Аллен

Вони додали його до запиту на покращення. На мобільному - це ще гірше. Але найсмішніше - коли ви переходите на веб-сайт фоторами на мобільних пристроях, ці великі галереї зображень завантажуються швидше, ніж магенто. Коли ви робите оновлення, це майже миттєво. Проблема полягає в магенто.

— Fancyman

Напевно, має бути виправлення для цього до цього часу? Його все ще дуже повільно, дякую, що задали питання, я буду постійно перевіряти це, щоб побачити, чи щось колись зміниться.

— Енді Джонс

Іноді ця команда спрацює: php bin / magento каталог: images: resize

— Saphal Jha

Що це означає і як це зробити "Виправлення для стрибків вмісту. Навантажувач повинен бути такого ж розміру, як галерея" Я виявив одну проблему, коли завантаження продукту, ніж зображення, виявляється першим малим і більшим

— Akbar Mo

Відповіді:

Ось просте рішення, яке призведе до того, що базове зображення продукту відображатиметься під час завантаження 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

@Aaron Allen, будь ласка, поясніть, що ви зробили з коментарем у публікації чи в коді.

— LucScu

Я додав рядок для першого imgелемента.

— Аарон Аллен

Це працювало для мене на Magento EE 2.1.7.

— запчастини

Відповідь Аарона Аллена була чудовою, і я використовував її, щоб зрозуміти, як це зробити для мого налаштування.

Все, що мені потрібно було зробити, це додати зображення з деяким вбудованим 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 центи.

— Джеймс Харрінгтон
джерело