magento에서 지연없이 어떻게 제품 이미지 갤러리를 즉시로드 할 수 있습니까?

이것은 나와 함께 맨 처음 내 질문입니다 :)

문제 : magento 2에 사용 된 사진 갤러리는 사용자 경험을 느리게 만듭니다. 제품 이미지가 "인스턴트"가 아닌 경우 캐시 된 정적 마 젠토 2가 얼마나 빨리 실행되는지는 중요하지 않습니다.

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

위의 링크 (magento 블로그에 showacased 상점)로 이동하면, 링크가 열리고 로딩 아이콘이 표시되고 이미지가로드됩니다. 그건 정말 나쁘다.

즉시로드해야합니다. 밤처럼. 완료, 특히 전체 페이지 캐시 및 opcache가 활성화 된 경우.

이 동작을 변경하는 방법이 있습니까? 즉시로드하려면?

사용자에게는 페이지에서 가장 중요한 "요소"입니다. 최신으로 로드됩니다 .

아무도 이것에 대해 불평하지 않습니다.

이것은 전자 상거래이며 중요한 것은 "사진"입니다. 사용자가 관심을 갖는 것입니다. 그들이 제품 페이지를 클릭하는 이유는 "이미지를 더 잘 볼 수 있습니다. 개인적으로 나를 위해 정말 버그가 있습니다. 아무 이유없이 내가 화를 내고 나 자신에게 미쳤는지 물어봐야합니까?"

미리 감사드립니다, 나는 그런 일이 어떻게 일어날 수 있는지 혼란 스럽습니다.

내 magento 1에서 즉시로드됩니다.

— 멋진 남자
소스

그들은 사진이로드되는 동안 최소한 기본 이미지를 표시 할 수 있다고 동의했습니다. 그렇게하려면 모듈을 만들어야합니다.

— Aaron Allen

개선 요청 기능에 추가했습니다. 모바일에서는 더욱 악화됩니다. 그러나 재미있는 점은 모바일의 사진 웹 사이트를 방문하면 큰 이미지 갤러리의로드가 마 젠토보다 빠릅니다. 새로 고침을하면 거의 즉각적입니다. 문제는 마 젠토에 있습니다.

— Fancyman

지금까지이 문제를 해결해야합니까? 여전히 매우 느립니다. 질문을 내 주셔서 감사합니다. 이것을 다시 확인하여 하하가 바뀌는 것이 있는지 확인하십시오.

— 앤디 존스

때로는이 명령이 작동합니다 : php bin / magento catalog : 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>

도움이 되었기를 바랍니다.

— 아론 앨런
소스

고마워 Aaron! 내가 집에 돌아 오면 오늘 밤에 시도 할 것이다! 정말 감사합니다!

— Fancyman

Aaron 나는 그것을 시도했다. 효과가있다. 좋은 임시 솔루션이지만 갤러리로드 속도를 수정할 수 있기를 바랍니다. 왜 그렇게 느리게로드되는지 이해하지 못합니다. fotorama site에서 더 큰 갤러리이며 즉시로드됩니다. 모바일 fotorama.io에서 시도해 볼 수도 있습니다. U가 더 빠르며 이미지가 더 크게 보입니다.

— Fancyman

@Aaron Allen은 게시물이나 코드에 주석으로 무엇을했는지 설명해주세요.

— LucScu

첫 번째 img요소 의 줄을 추가했습니다 .

— Aaron Allen

이것은 Magento EE 2.1.7에서 나를 위해 일했습니다.

— sparecycle December

Aaron Allen의 답변은 훌륭했으며 사용자 정의 설정을 수행하는 방법을 알아내는 데 사용했습니다.

내가해야 할 일은 인라인 CSS로 이미지를 추가하고 패딩 바닥을 추가하는 것입니다 : 로딩 마스크에 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 센트를 추가하고 싶었습니다.

— 제임스 해링턴
소스