Macentadaki gecikmeden ürün resim galerisini anında nasıl yükleyebiliriz?

bu benim ilk quesiton çıplak benimle :)

Sorun: Magento 2'de kullanılan fotorama galerisi kullanıcı deneyimini durgun yapıyor. Ürün görüntüsü "anlık" değilse önbelleğe alınmış statik macenta 2'nin ne kadar hızlı çalıştığı önemli değildir.

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

Yukarıdaki bağlantıya (magento blogunda gösterilen bir mağaza) giderseniz, açıldığını görebilirsiniz, ardından bir yükleme simgesi gösterir ve ardından görüntüleri yükler. Bu korkunç.

Anında yüklenmelidir. Bamm gibi. Tamam, özellikle tam sayfa önbellek ve opcache etkin.

Bu davranışı değiştirmenin bir yolu var mı? Anında yüklemek için?

Kullanıcı için, sayfadaki en önemli "öğe" dir. ve en son olarak yüklenir .

Kimsenin bu konuda nasıl şikayet etmediğini anlamıyorum.

Bu E ticaret, önemli olan tek şey "resimler". Kullanıcının umurunda. Ürün sayfasına tıklamanın nedeni, "görüntüleri daha iyi görmek. Şahsen benim için gerçekten beni rahatsız ediyor. Hiçbir sebepten ötürü süper öfkeleniyorum ve sonra kendime soruyorum deli olduğumu?

Şimdiden teşekkürler, böyle bir şeyin nasıl olabileceğini kafam karıştı.

Benim magento 1, anında yüklenir.

— Gösterişli adam
kaynak

Kabul ettiğinde, fotorama yüklenirken en azından temel görüntüyü gösterebilirler. Bunu yapmak için bir modül yapmam gerekecek.

— Aaron Allen

Bunu iyileştirme talebine eklemek için eklediler. Mobilde daha da kötü. Ama komik olan şey, mobil fotorama web sitesine gittiğinizde, bu büyük resim galerinin yükü magentodan daha hızlı. Yenileme yaptığınızda neredeyse anında. Sorun macentada yatıyor.

— Fancyman

Şimdiye kadar bunun için bir düzeltme olmalı mı? Hala süper yavaş, soruyu sorduğunuz için teşekkürler, bir şey haha değişip değişmediğini görmek için bunu kontrol etmeye devam edeceğim.

— andy jones

Bazen bu komut işe

— yarar

Ne anlama gelir ve nasıl yapılır "İçeriği atlamak için düzeltme. Yükleyici galeriyle aynı boyutta olmalıdır" Bir sorun buldum, bu görüntüden daha fazla ürün

— Akbar Mo

JS yüklenirken ürünün temel görüntüsünün görüntülenmesine neden olacak basit bir çözüm. Temanızda şu dosyayı oluşturun: {theme_dir}/Magento_Catalog/templates/product/view/gallery.phtml içeren:

<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>

Bu yardımcı olur umarım.

— Aaron Allen
kaynak

Teşekkürler Aaron! Eve geldiğimde bu gece deneyeceğim! Gerçekten takdir ediyorum!

— Fancyman

Aaron denedim. İşe yarıyor. Bu güzel bir geçici çözüm ama keşke galeri yükleme hızını düzeltmek isterdim. Neden bu kadar yavaş yüklendiğini anlamıyorum. Fotorama sitesinde, daha büyük galeri ve anında yüklenir. Hatta mobil fotorama.io üzerinde deneyebilirsiniz, u çok daha hızlı ve görüntüleri çok daha büyük görebilirsiniz.

— Fancyman

@Aaron Allen, yazıda veya kodda bir yorum yaparak ne yaptığınızı açıklayın.

— LucScu

İlk imgeleman için satır ekledim .

— Aaron Allen

Bu benim için Magento EE 2.1.7'de çalıştı.

— sparecycle

Aaron Allen'ın cevabı harikaydı ve özel kurulumum için nasıl yapılacağını anlamak için kullandım.

Tüm yapmam gereken bazı satır içi css ile görüntü eklemek ve dolgu alt eklemek: yükleme maskesine% 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>
...

Yukarıdaki cevaba oldukça benziyor ama benim 2 sent eklemek istedim.

— James Harrington
kaynak